使用el-upload
<div class="upload-container">
<el-upload
class="upload-demo"
:action="action" //上传接口路径
:headers="headers" //请求头
:multiple="false" //选择多张
:limit="1" //限制上传个数
:on-preview="handlePreview" //上传后触发
:on-remove="handleRemove" //删除触发
:before-remove="beforeRemove" //删除前触发
:on-exceed="handleExceed" //文件超出限制触发
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
</div>
//process.env.VUE_APP_BASE_API 获取请求api主路径
data() {
return {
action: `${process.env.VUE_APP_BASE_API}/book/upload`, //上传接口路径
headers: {
Authorization: `Bearer ${getToken()}`,
},
};
},