一、应用场景
1、直接上传
(1)、无参数上传
此场景在atd官网有大量案例,在此就不在赘述,直接上传的场景一般用在页面上的情况下,比如在单个页面上想做个批量导入的业务,点击批量导入按钮,点击上传Excel表格,然后将数据显示在页面上的表格中,这样直接在upload组件的action属性中直接加上后端接口的地址即可
(2)、有参数上传
此场景一般用在需要找对应身份的场景下,比如在上传头像时,你需要将人物的id也上传,这样才能将对应的头像存在对应的user下,这就要用到upload中的data属性
案例:(此处为伪代码)
<a-upload
name="file"
@change="uploadFileChange"
action="/demo/user/uploadHeadPortrait"
:data="{userId:userId}"
>
<a-button type="primary">
<a-icon type="export" />
上传头像
</a-button>
</a-upload>
methods:{
uploadFileChange (info) {
let self = this
if (info.file.status === 'done') {
if (info.file.response.code === 1) {
self.$success({
title: '提示',
content: '经销商批量导入成功'
})
} else {
self.$error({
title: '提示',
content: info.file.response.msg
})
}
} else if (info.file.status === 'error') {
self.$error({
title: '提示',
content: info.file.response.msg
})
}
}
}
后端:
@PostMapping("/demo/user/uploadHeadPortrait")
public Map uploadHeadPortrait(@RequestParam("userId") String userId,@RequestParam("file") MultipartFile photo)){
//TODO
}
2、不用upload组件上传
这种情形一般是在修改一组数据时,需要在前端先把上传文件变成base64文件流,点击修改按钮时,将base64文件数据和表单数据一起传入后台。
(1)、先转成base64和其他数据一起上传
<a-row :gutter="24">
<a-form-item label="需要提交的资料" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
<a-input placeholder="提交资料" :disabled="!isEdit" v-decorator="['submitData']"></a-input>
</a-form-item>
</a-row>
<a-row :gutter="24">
<a-form-item label="图片" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
<a-input placeholder="提交资料" :disabled="!isEdit" v-decorator="['submitData']"></a-input>
<img :src="productLogo" width="150px" />
<a-upload
name="file"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
action=""
:disabled="!isEdit"
:beforeUpload="beforeUploadFile"
@change="handleChange"
>
<img v-if="productLogo" :src="productLogo" alt="avatar" width="150px"/>
<div v-else>
<a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text">
上传图片
</div>
</div>
</a-upload>
</a-row>
methods:{
beforeUploadFile (file) {
let self = this
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJpgOrPng) {
self.$message.error('你只能上传图片文件', 1)
return false
} else if (!isLt2M) {
self.$message.error('图像必须小于2MB', 1)
return false
} else {
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function (e) {
self.productLogo = e.currentTarget.result //获取文件的base64流 赋给全局变量productLogo
}
}
return false //使upload组件停止上传
},
editConfirm () {
let self = this
self.form.validateFields((err, values) => {
if (!err) {
self.$apiPost({
url: self.$apiUrl.bank.update,
data: {
submitData: values.submitData,
productLogo: self.productLogo
}
})
.then(res => {
if (res.data.code === '0') {
self.$error({
title: '提示',
content: res.data.msg
})
} else {
self.$success({
title: '提示',
content: res.data.msg
})
self.productId = ''
self.getProductList()
self.selectedRowKeys = []
self.selectedRowKeysString = ''
}
self.detailvisible = false
})
.catch(error => {
self.$error({
title: '提示',
content: error.message
})
})
}
})
}
}
(2)、页面中单个按钮,传入id,并且将不用upload组件上传,先转成base64在上传
本来是想结合data属性加参数上传,但是在第一次上传是拿不到文件的base64流,然后只能在beforeUpload属性中直接使用axios请求上传
组件上action还是为空,而axios请求只能写在reader.onload里,不然第一次还是拿不到self.contractPDF的base64流,这种情况我也不知道为什么,希望有大神帮忙解惑一下。
// 上传文件
beforeUploadFile(file){
let self = this
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(e){
self.contractPDF = e.target.result
// console.log("pdf"+self.contractPDF)
self.$apiPost({
url:self.$apiUrl.supplier.uploadContractPDF,
data:{
contractId:self.contractId,
contractPDF:self.contractPDF
}
}).then((res) => {
if (res.data.code === '1') {
self.visible = false
self.$success({
title: '提示',
content: "合同导入成功"
})
self.file = true
} else {
self.$error({
title: '提示',
content: res.data.msg
})
}
})
}
return false
},