webuploader上传片怎么将用户信息页一起传给后端

Question

我们现在是这样的
上传图片有用户信息
怎么能把图片链接和信息一起传给后端

webuploader上传生成缩略图

Answer 1

通过FileReader把文件转成base64字符串上传服务器

<script>
var base64Str = '';
function selectImage() {
  var file = document.getElementById('file').files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
      var base64 = e.target.result;
      document.getElementById('img').setAttribute('src', base64);
    base64Str = base64;
  }
  reader.readAsDataURL(file);
}
function upload() {
    if (!base64Str) {
        alert('没有选择图片');
        return;
    }
    $.ajax({
      type: 'post',
      url: 'http://xxx.com/upload',
      dataType: 'json',
      data: {
        fileName: file.name,
        fileBaseStr: base64Str
      },
      success: function(res) {
        if (res.data.code == 0) {
          var filePath = res.data.data.filePath;
          alert('上传成功，路径为：' + filePath);
          //返回filePath之后，加入到需要提交的表单项中，服务器就只需要接收这个filePath就行了
        } else {
          alert('上传失败')
        }
      },
      error: function(err) {
        alert('网络错误')
      }
    });
}
</script>
<img id="img" width="80" height="80" />
<input type="file" id="file" onchange="selectImage()" />
<button onclick="upload()">上传</button>

Answer 2

放到一个form里面提交不行吗？

Answer 3

图片传到后台可以转成Base64格式以后再传到后台，图片过大时最后先压缩再处理