前端：上传图片upload组件（传formData格式，后端返回图片文件流）

使用组件：iview中的upload组件

html:

<Upload
                multiple
                type="drag"
                :action="''"
                :before-upload="uploadImg"
              >
                <div style="padding: 20px 0">
                  <Icon
                    type="ios-cloud-upload"
                    size="52"
                    style="color: #3399ff"
                  ></Icon>
                  <p>选择本地文件上传</p>
                </div>
              </Upload>

传递给后端的是formData格式的数据，后端返回的是图片的文件流（这其中调了两次接口，第一次接口返回的是图片的不完整路径，第二次调用查询接口返回图片的文件流）

js代码：

const uploadImg = (file) => {
  let fd = new FormData();
  fd.append("file", file);
  // 调用上传接口
  let path = proxy.GlobalUrl.ANALYSIS.UPLOADIMG;
  proxy.http.post(path, fd).then((res) => {
    if (res.data.code === 0) {
      queryImg(res.data.data);
    }
  });
};
// 查询工程图片
const queryImg = (url) => {
  let path = proxy.GlobalUrl.ANALYSIS.VIEWIMG;
  let params = {
    imageUrl: url,
  };
  proxy.http.get(path, params, "blob").then((res) => {
    if (res.status === 200) {
      let blob = res.data;
      let reader = new FileReader();
      reader.readAsDataURL(blob); // 转换为base64
      reader.onload = function () {
        formValidate.imgId = reader.result;
        state.imgURL = reader.result;
      };
    }
  });
};

第二个接口返回的文件流要转化为base64(可以直接放src属性里显示图片)，转化时用到了FileReader，readAsDataURL()这个方法返回的是data:url形式的字符串。

base64格式的图片如下：