vue + element-ui 跨域拖拽上传文件
element-ui里面的默认拖拽上传组件<el-uploadclass="upload-demo"dragaction="#"multiple><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div&g
·
element-ui里面的默认拖拽上传组件
<el-upload
class="upload-demo"
drag
action="#"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
在这里面action对应的上传的接口, 但是在前后端分离开发的过程中一般都是存在跨域的,所以我们就不用这个action进行上传操作。
我们使用http-request来进行上传操作
以上传图片为例:
<el-upload
class="upload-demo"
drag
action="#"
:http-request="uploadImage"
:before-upload="beforeUpload"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过2M</div>
</el-upload>
//上传文件
async uploadImage(params){
// 一般上传文件使用的是formdata格式 我们需要使用formdata进行传参
const formdata = new FormData()
formdata.append("file",params.file)
const res = await uploadFile(formdata)
if (res.success) {
}
}
// 文件上传前的钩子函数 可以对文件类型大小进行筛选
beforeUpload(file){
// 只能上传jpg和png的图片
const isImage = file.type==="image/jpg"||file.type==="image/png"
// 大小限制为2M
const isLt2M = file.size/1024/1024 <= 2
if(!isImage){
this.$message.error("图片格式错误!")
}
if(!isLt2M ){
this.$message.error("图片大小错误!")
}
return isImage && isLt2M
}
请求就可以使用正常的跨域写法了
// request 是二次封装的跨区axios
export const uploadFile = (params) => request.post("/url/url/url", params)
更多推荐
已为社区贡献1条内容
所有评论(0)