- 頁面上的樣式
<input type="file" accept="image/*" @change="changefile">
- 實作 changefile 方法
/* 上傳圖片操作 */
changefile(event) {
/* 獲取到你選擇的檔案 */
let file = event.target.files[0];
/* 限制檔案上傳型別 */
let suffixName = file.name.substring(file.name.lastIndexOf('.') + 1); /* 得到檔案后綴名 */
if (suffixName !== 'jpg' && suffixName !== 'png') {
this.$message.warning("上傳檔案只能是 jpg、png 格式!");
return;
}
/* 限制檔案上傳大小 */
let isLtSize = file.size / 1024 / 1024 < 10;
if (!isLtSize) {
this.$message.warning("上傳檔案不能超過 10MB!");
return;
}
/* 上傳檔案必須要用 formData 構造條件去構造請求引數 */
let formData = new FormData();
formData.append('file', file);
/* 呼叫后臺上傳圖片的介面 */
uploadFile(formData).then(res => {
// res 就是你圖片上傳成功后的回傳值
// 拼接上你的專案地址就能成功訪問到圖片地址了
console.log("上傳圖片操作", res.url);
});
}
- uploadFile 是專案中通過 axios 封裝好的請求，你們按照自己專案的封裝請求去用就可以了，也可以通過遠程的 ajax 發送請求上傳圖片
注意點：上傳圖片，headers 一定要攜帶 { ‘Content-Type’:‘multipart/form-data’ }
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/208844.html
標籤：其他
上一篇：HDU-4850 Wow! Such String!（模擬） ——26行代碼AC
下一篇：理解 OC 中 RunLoop