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

问题描述

问 题

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

webuploader上传生成缩略图

解决方案

通过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>

这篇关于javascript - webuploader上传片怎么将用户信息页一起传给后端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！