大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
文件上传部分
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
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/170653.html原文链接：https://javaforall.net
![Linux初识之Kali Linux 系统安装详细教程（虚拟机）[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
