upload上傳組件的使用方法
上傳圖片后自動上傳（也可以手動上傳），圖片上傳成功后由后端回傳特定圖片地址，在表單提交后將表單資料同圖片地址一并回傳即可完成圖片上傳功能，
組件HTML
<!-- 上傳圖片 -->
<div style="margin: 4px 0">圖片上傳（僅支持jpg、png格式）</div>
<el-upload
:
action="#"
list-type="picture-card"
:auto-upload="true"
:limit="3"
:http-request="uploadFiles"
:before-upload="beforeAvatarUpload"
:on-change="onChange"
:on-success="onSuccess"
:on-remove="handleRemove"
:file-list="fileList"
accept="image/jpeg,image/gif,image/png,image/jpg"
>
<i slot="default" ></i>
</el-upload>
需要宣告部分變數
方法
1.將圖片轉換為base64的方法
//檔案轉base64
getBase64(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader()
let fileResult = ''
reader.readAsDataURL(file) //開始轉
reader.onload = function () {
fileResult = reader.result
} //轉 失敗
reader.onerror = function (error) {
reject(error)
} //轉 結束 咱就 resolve 出去
reader.onloadend = function () {
resolve(fileResult)
}
})
},
2.陣列根據內容洗掉對應元素
// 對應內容的索引
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
// 洗掉對應索引的內容
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
3.編輯圖片并回顯
已經上傳過的圖片如果需要進行編輯的話需要在進行上傳之前先將已經上傳過的圖片已規定的格式存入圖片串列中
放在切換至參考
this.picArr = [];
// 編輯上傳過的圖片
if (row.picList.length > 0) {
for (let i = 0; i < row.picList.length; i++) {
let param = { name: "", url: "", data: "" };
param.name = row.picList[i].id;
param.url = "/xxx/xxx/xxx?picUrl=" + row.picList[i].picurl;
this.picArr.push(param);
}
}
通過接受進來的資料將已經上傳過的圖片進行格式化，其中需要包含name、url 兩種屬性，HTML中需要寫入:file-list="picArr"其中picArr就是自動添加進去的圖片（格式與手動上傳的圖片不統一，提交的時候需要再次處理）
4.將檔案以formdata的形式進行發送
//發送請求
let params = new FormData()
params.append('file', file.file)
params.append('size', file.file.size)
api.submit(params)
.then((res) => {
this.$message.success('上傳圖片成功')
this.feedbackImg.push(res.data)
})
.catch((err) => {
console.error(err)
})
鉤子
1.更改默認請求 http-request
需要將默認請求開啟 :auto-upload="true"
// 自定義上傳圖片
uploadFiles(data) {
console.log(data)
this.formData.fileName = data.file.name //檔案名
this.formData.fileType = 'updateNoticeFile'
this.getBase64(data.file).then((resBase64) => {
// 操作，，，
this.fileList.push({
name: this.formData.fileName,
url: resBase64,
})
})
},
2.圖片上傳前 before-upload
// 上傳檔案前
uploadBefore(file) {
const isJPG =
file.type === "image/png" ||
file.type === "image/jpg" ||
file.type === "image/jpeg";
const isLt = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("只能上傳.jpg/.png/.jpeg格式圖片!");
return false;
}
if (!isLt) {
this.$message.error("上傳圖片大小不能大于等于2MB!");
return false;
}
return true;
},
3.發生改變之后 on-change
//發生改變后
onChange(file, fileList) {
this.hideUpload = this.imgList.length >= this.limitCount;
//操作...
},
4.檔案上傳成功后 on-success
//上傳成功后
onSuccess(response, file, fileList, xhr) {
this.picList = fileList;
},
利用第三個引數fileList保存當前檔案串列的狀態
5.洗掉成功后 on-remove
其中imgList為個人自定義添加的圖片串列，實際可用fileList替代
// 洗掉成功后
onRemove(file, fileList) {
// file = JSON.stringify(file)
// 對應內容的索引
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
// 洗掉對應索引的
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
if (file && file.status === "success") {
// 洗掉成功時候的方法
this.imgList.remove(file);
this.hideUpload = this.imgList.length >= this.limitCount;
}
this.picList = fileList;
},
利用第二個引數 fileList 保存檔案串列的狀體
樣式
隱藏添加按鈕
根據動態增加hide類使新增圖片按鈕動態隱藏
對upload上傳檔案標簽添加動態的class當圖片上傳至指定個數后將添加按鈕隱藏
:
// 隱藏新增的按鈕
/deep/ .hide .el-upload--picture-card {
display: none;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541963.html
標籤：其他