- 最近項目中用到了一個上傳功能芭逝，在前后端進(jìn)行聯(lián)調(diào)的時候一直報400，經(jīng)過查閱文檔渊胸，參考各個博主精品文章旬盯，問題最終解決，并寫下此文章做記錄翎猛，方便下次使用胖翰，如需用到可根據(jù)項目需求修改接口及http-request方法即可
要做的事：在http-request方法中使用自定義接口傳參，上傳文件
-
先來一段代碼办成，然后分析一下Upload各個屬性的作用
<el-upload
class="upload-excel"
ref="upload"
action="string"
accept=".xlsx,.xls"
:limit="1"
:http-request="httpRequest"
:file-list="fileList"
:before-upload="beforeExcelUpload"
>
<el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>
action 必選參數(shù)泡态，上傳的地址搂漠，如果我們使用http-request迂卢，action可以傳入字符串，人家說了必選桐汤，不能空著而克，此時action無作用
accept 接受上傳的文件類型
limit 最大允許上傳個數(shù)
file-list 上傳的文件列表，我們綁定的fileList需要在data中聲明
http-request 覆蓋默認(rèn)的上傳行為怔毛，可以自定義上傳的實現(xiàn)
before-upload 傳文件之前的鉤子员萍，參數(shù)為上傳的文件，若返回 false則停止上傳拣度。我們可以在這里對文件上傳格式及大小做出限制
-
下面是我們最需要的一些方法
<script>
// 引入接口碎绎，在下方我會給出接口定義方式
import { uploadExcel } from "@/api/upload";
export default {
name: "upload",
data() {
return {
fileList: []
};
},
methods: {
// 上傳文件之前的鉤子,上傳前對文件的大小和類型進(jìn)行判斷
beforeExcelUpload(file) {
// 打印file，幫助我們了解我們需要的參數(shù)
console.log(file);
const isExcel = file.name.split(".")[1] === "xlsx" || file.name.split(".")[1] === "xls";
const isSize = file.size / 1024 / 1024 < 1;
if (!isExcel) {
this.$message({
message: "只能上傳xls或xlsx文件!",
type: "error"
});
}
if (!isSize) {
this.$message({
message: "上傳文件大小不能超過 1MB!",
type: "error"
});
}
return isExcel && isSize;
},
// 覆蓋默認(rèn)上傳行為
httpRequest(params) {
let fd = new FormData();
fd.append("file", params.file);
fd.append("FileName", params.file.name);
fd.append("user", "張三");
// query是放在params中接收的參數(shù)抗果，fd是放在了body中接收
uploadExcel(query, fd)
.then(res => {
if (res.resule == 1) {
alert("上傳成功");
}
})
.catch(err => {
alert("上傳失敗筋帖，請重新上傳");
});
}
}
// uploadExcel接口,我這里使用了兩種方式傳參，最后記得加上請求頭
// export function uploadExcel(query,data) {
// return request({
// url: '/api/users',
// method: 'post',
// headers: { "Content-Type": "multipart/form-data" },
// params: query,
// data
// })
// }
};
</script>
最后
- 如果遇到什么問題就留言吧冤馏，能解決大家一起解決一下
- 要您覺得有用日麸，就點贊收藏鼓勵一下把
- 文章是自己手敲，是對工作日常的總結(jié)逮光，如有錯誤之處代箭，敬請指正
