1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 前端:上传图片upload组件(传formData格式 后端返回图片文件流)

前端:上传图片upload组件(传formData格式 后端返回图片文件流)

时间:2019-01-02 09:27:11

相关推荐

前端:上传图片upload组件(传formData格式 后端返回图片文件流)

使用组件: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格式的图片如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。