【vue2-el-upload上传文件】
只上传一个 并且再次上传替换上一个
<el-upload class="upload-demo" action="#" :on-change="handleChange"
:before-upload="beforeUpload" :show-file-list="false" :file-list="fileList"
:auto-upload="false" accept=".pdf,.docx,.doc">
<el-button size="small" type="primary">上传文件</el-button>
</el-upload>
<el-button size="small" type="primary" @click="submit">上传</el-button>
handleChange(file, fileList) {
this.file = file.raw
console.log(file.raw)//上传的文件是file.raw
},
beforeUpload(file) {
const isPdfOrWord = ['.pdf', '.docx', '.doc'].some(ext => file.name.endsWith(ext));
if (!isPdfOrWord) {
this.$message.error('只能上传 PDF/Word 文件');
return false;
}
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
this.$message.error('文件大小不能超过 5MB');
return false;
}
return true;
},
getdeliveryForm(object, type) {
let that = this, params = {
file: this.file,
}
var service = axios.create({
baseURL: '统一请求接口前缀',
withCredentials: true, // 跨域支持发送cookie
timeout: 5000 // 请求超时时间
})
function postFormData(url, params) {
return new Promise(function (resolve, reject) {
service({
headers: {
//需要注意 上传文件的请求头一定是下面这个!!!!
'Content-Type': 'multipart/form-data',
//以下都是必须要有的参
'user-token': userToken,
},
transformRequest: [
function (data) {
// 在请求之前对data传参进行格式转换
var formData = new FormData()
Object.keys(data).forEach(function (key) {
formData.append(key, data[key])
})
return formData
}
],
url: url,
method: 'post',
data: params
})
.then(function (res) {
if (res.data.code != 200) {
handlerHttpError(res.data)
reject(res.data)
} else {
resolve(res.data)
}
})
.catch(function (err) {
if (err.message.includes('timeout')) {
window.ELEMENT.Message.error('服务器繁忙,请刷新页面重试!')
}
reject(err)
})
})
}
postFormData('url', params)
.then(function (res) {
})
},