使用组件:iview中的upload组件
html:
<Uploadmultipletype="drag":action="''":before-upload="uploadImg"><div style="padding: 20px 0"><Icontype="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); // 转换为base64reader.onload = function () {formValidate.imgId = reader.result;state.imgURL = reader.result;};}});};
第二个接口返回的文件流要转化为base64(可以直接放src属性里显示图片),转化时用到了FileReader,readAsDataURL()这个方法返回的是data:url形式的字符串。
base64格式的图片如下: