1.使用默認(rèn)方式上傳
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/" // 圖片上傳地址
:data="data"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
- action填寫后端給的文件上傳地址
- 如果接口需要傳輸其他參數(shù),可以綁定到data上面, 比如data={token: "token"}
- 使用默認(rèn)的上傳方式,后端返回的必須要給成這種格式
{
"error": 0,
"url": "",
"name": ""
}
2.自定義上傳
- 自定義上傳時(shí)就不用管后端返回的數(shù)據(jù)格式
- el-upload中添加屬性:http-request="upload"綁定自定義的上傳函數(shù)
<el-upload
:http-request="upload"
- 實(shí)現(xiàn)上傳函數(shù),這里使用xhr上傳
upload(param) {
console.log('參數(shù)', param)
try {
// 創(chuàng)建form對(duì)象,必須使用這個(gè),會(huì)自動(dòng)把content-type設(shè)置成multi-part-form
const formData = new FormData()
formData.append('file', param.file)
//創(chuàng)建xhr
const xhr = new XMLHttpRequest()
//post上傳地址
xhr.open('post', this.url)
//設(shè)置token如果需要
xhr.setRequestHeader('token', getToken())
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
const json = JSON.parse(xhr.response)
// 根據(jù)后端給的信息判斷是否上傳成功
if (json.code === 1) {
param.onSuccess(json, param.file, param.fileList)
this.fileList.push({ name: param.file.name, url: json.url, data: json.data })
} else {
param.onError(json)
}
}
}
//獲取上傳的進(jìn)度
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percent = event.loaded / event.total * 100
param.onProgress(percent)
}
}
//將formdata上傳
xhr.send(formData)
} catch (e) {
param.onError(e)
}
},
3.上傳到七牛,和2類似,把其中的xhr換成七牛上傳即可
