element 关于Upload 上传功能,之前一直没有接触过,也不知道咋写,慢慢摸索…
首先是接口地址
//
// HTML代码
<el-form-item
label="上传照片"
prop="busLicensePic"
>
<el-upload
class="upload-demo"
ref="upload"
:action="action()"
:before-upload="beforeUpload"
:on-preview="handlePreview"
list-type="picture-card"
:data="itemForm"
:on-error="error"
:on-success="successResave"
:on-remove="handleRemove" //移除
:file-list="fileList"
:show-file-list="true"
:disabled="isDisabled"
>
<el-button
size="small"
type="primary"
>点击上传</el-button>
<div
slot="tip"
class="el-upload__tip"
>
1、支持的图片格式:BMP、TIFF、GIF、PNG、JPEG <br>
2、文件大小应该小于100KB <br>
3、可一次选择多张照片上传、上传的图片数量最多20张
文本框、必填、由1-18个英文、数字字符组成 <br>
4、可上传法人身份证正反面、营业热照等 <br>
</div>
</el-upload>
//这个是data里面接的参数
data(){
return {
itemForm: {
bucketName: 'customs',
expires: '10000',
perfixName: '2',
},
fd: '', //向服务器进行传递的参数(带有图片formdata)
}
//然后这个是那个methods里的方法
methods:{
action() {
return 'http://192.***.*.***:****/customs/upload/file' //
},
// 预览
handlePreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
console.log(file)
},
// 图片上传
fileUp() {
// debugger
uploadFile(this.fd).then((response) => {
if (response) {
this.$message({
showClose: true,
type: 'success',
message: '设置成功',
})
// this.initPage()
}
console.log(response, '图片上传成功')
// this.dialogImageUrl = file.url
// console.log(this.dialogImageUrl)
})
},
beforeUpload(file) {
// debugger
const isJPG =
file.type == 'image/jpeg' ||
file.type == 'image/png' ||
file.type == 'image/gif'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.warning('上传头像图片只能是 JPG/PNG/GIF 格式!')
return isJPG
}
if (!isLt2M) {
this.$message.warning('上传头像图片大小不能超过 2MB!')
return isLt2M
}
this.multfileImg = file
// return isJPG && isLt2M
this.fd = new FormData() //
// //传其他参数
this.fd.append('bucketName', this.itemForm.bucketName)
this.fd.append('expires', this.itemForm.expires)
this.fd.append('perfixName', this.itemForm.perfixName)
this.fd.append('upfile', file)
this.fileUp()
},
successResave(res, file) {
this.itemForm.upfile = URL.createObjectURL(file.raw)
},
//失败钩子
error(response, file, fileList) {
console.log(response)
},
// 移除
handleRemove(file, fileList) {
// return this.$confirm(`确定移除 ${file.name}?`)
console.log(file)
},
}