文件上传部分

1.文件的上传

常规的文件上传是通过form表单包裹file类型的input标签进行上传,在form里面的属性中定义上传方式如post,上传地址url,或者通过如elementUI的upload模块进行一系列的上传操作.但很多时候我们并不需要用到那么多复杂功能,所以文件上传的本质应该只有两步:

(1)将本地文件上传到浏览器端

(2)将浏览器端的文件发送到对应api接口

其他的额外操作可以由自己定义.

2.具体代码

上传代码如下:

上传图片

@change="getimg"

accept="image/x-png, image/gif, image/jpeg, image/bmp"

class="fileupload"

ref="fileupload"

type="file"

/>

upload() {

this.$refs.fileupload.dispatchEvent(new MouseEvent('click'))

},

file类型的input样式很丑而且很不好修改,一般的话对于其的样式优化是将input标签设置为display:none,用我们自定义的按钮或其他来绑定input的点击事件以完成上传的diy风格.

然后是获取上传文件在浏览器的地址:

getimg() {

let file = this.$refs.fileupload.files[0]

this.filename = file.name

let reader = new FileReader() //读取文件

reader.readAsDataURL(file)

let _this = this

reader.onload = function() {

_this.$refs.imgshow.src = reader.result

}

}

一般只有图片需要用到该功能来预览

发送api部分:

addWatermark() {

this.fullscreenLoading = true

let file = this.$refs.fileupload.files[0]

let param = new FormData()

// 将得到的文件流添加到FormData对象

param.append('file', file, file.name)

this.$api.search.addWatermark(param).then()

}

文件上传之后本身并不能直接和一般的数据格式发过去,所以要放在formdata类里面才能达到和包裹在form里面传输一样的效果

注:传输文件是request里面的Content-Type属性一定要是: multipart/form-data

blob下载

很多时候我们从后端接口api拿到的文件类型往往是二进制流的文件,对于这个文件我们前端无法直接下载,所以要通过几步操作

1.请求接口是要告诉接口我请求的是blob类型:responseType: 'blob'

如axios是这样的axios.post(/addWaterMark, params, { responseType: 'blob' });

2.收到请求回调时要对文件blob解析后下载

具体代码是:

if (res.status == 200) {

let blob = new Blob([res.data])

//将二进制流blob数据转化为js认识的blob对象

//有时还要加上类型判别如: let blob = new Blob([res.data], {

// type: 'application/vnd.ms-excel'

//})

let downloadA = document.createElement('a')

downloadA.download = 'WM_' + this.filename

//下载文件命名

downloadA.href = window.URL.createObjectURL(blob)

//获取下载路径

downloadA.click()

}

blob类型汇总

后缀 MIME Type

.doc application/msword

.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document

.xls application/vnd.ms-excel

.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

.ppt application/vnd.ms-powerpoint

.pptx application/vnd.openxmlformats-officedocument.presentationml.presentation