vue+vant 利用FormData上传图片(单张or多张)第一版
效果:代码如下://html<!-- 上传资料 start --><p class="fw fz16 tl ml15 lh40">上传资料</p><van-cell-group title="申请评估表" class="ml15 pt5 borderBottom0" @click="current = 0"><div ...
·
介绍:
流程:input选取file=>append到FormData中=>提交后台。
利用FormData上传,这个流程无论换什么ui框架,或者自己写都走得通,亲测有效。(自己手写的上传就不拿出来分享了,主要是太乱,自己都看半天)
效果:
代码如下:
//html
<!-- 上传资料 start -->
<p class="fw fz16 tl ml15 lh40">上传资料</p>
<van-cell-group title="申请评估表" class="ml15 pt5 borderBottom0" @click="current = 0">
<div class="fz12 colore5">{{applyDetail.applicateEvaluRemarks}}</div>
<van-uploader
v-model="applicationFileList"
multiple
:disabled='active==0'
:max-count="4"
:after-read="afterRead"
/>
</van-cell-group>
<van-cell-group title="冷链保存知情同意书" class="ml15 pt5 borderBottom0" @click="current = 1">
<div class="fz12 colore5">{{applyDetail.coldChainInformedRemarks}}</div>
<van-uploader
v-model="coldChainFileList"
multiple
:disabled='active==0'
:max-count="4"
:after-read="afterRead"
/>
</van-cell-group>
<van-cell-group title="患者知情同意书" class="ml15 pt5 borderBottom0" @click="current = 2">
<div class="fz12 colore5">{{applyDetail.patientInformedRemarks}}</div>
<van-uploader
v-model="patientFileList"
multiple
:disabled='active==0'
:max-count="4"
:after-read="afterRead"
/>
</van-cell-group>
<van-cell-group title="身份证原件(正反面)" class="ml15 pt5 borderBottom0" @click="current = 3">
<div class="fz12 colore5">{{applyDetail.cardIdRemarks}}</div>
<van-uploader
v-model="cardFileList"
multiple
:disabled='active==0'
:max-count="4"
:after-read="afterRead"
/>
</van-cell-group>
<van-cell-group title="处方笺" class="ml15 pt5 borderBottom0" @click="current = 4">
<div class="fz12 colore5">{{applyDetail.prescriptionRemarks}}</div>
<van-uploader
v-model="prescriptionFileList"
multiple
:disabled='active==0'
:max-count="4"
:after-read="afterRead"
/>
</van-cell-group>
<van-cell-group title="购药发票" class="ml15 pt5 borderBottom0" @click="current = 5">
<div class="fz12 colore5">{{applyDetail.invoiceRemarks}}</div>
<van-uploader
v-model="invoiceFileList"
multiple
:disabled='active==0'
:max-count="4"
:after-read="afterRead"
/>
</van-cell-group>
<!-- 上传资料 end -->
<van-button type="primary" class="submits" @click="applyDrug" v-else>提交</van-button>
//js
data() {
return {
applicationFileList: [],//申请评估表
coldChainFileList: [],//冷链
patientFileList:[],//患者
cardFileList:[],//身份证
prescriptionFileList:[],//处方
invoiceFileList:[],//发票
current:0,
}
}
//methods方法
afterRead(file) { //上传
let that = this;
let current = this.current //当前上传
let deviceFile = [] //选择的图片数组
let formData = new FormData();
if(Array.isArray(file)){ //因为该组件单选是对象,多选是数组
deviceFile = file
}else{
deviceFile.push(file)
}
deviceFile.map((item)=>{
//files是后台参数name字段对应值
formData.append('files', item.file ,item.file.name);
})
console.log('选择值',file)
console.log('formData值',formData.getAll('files'))
//应为我有六个上传,封装为一个方法,赋值给对应的就好了
let currentData = ['applicationFileList','coldChainFileList','patientFileList','cardFileList','prescriptionFileList','invoiceFileList']
axios.post(this.$my.api+'/upload/upload',formData,{headers:{'Content-Type':'multipart/form-data'}})
.then(res => {
console.log('选择前',that[currentData[current]]);
//后台返回值 例如:231342.png,234.png以逗号分隔
res.data.split(',').map((item)=>{
//赋值给data对应的字段 current = 当前操作;组件格式默认且必须是[{content:xxx}]
//content原本是base64,用来显示,其实我们没用,我用的时候后台返回的url显示
//filter用来过滤默认选择的文件,组件会默认多追加一个[{content:xxx,file:xxx}]
that[currentData[current]].push({content:that.$my.img+item,invoiceUrl:that.$my.img+item});
that[currentData[current]]=that[currentData[current]].filter((item)=>!('file' in item))//选择没有file的
})
console.log('选择后',that[currentData[current]] ,res.data,{content:that.$my.img+res.data})
formData.delete('files');
}, err => {
Toast('上传失败,图片是否过大?')
})
},
applyDrug(){
let that = this
let getVal = (arr)=>{
let newArr = []
arr.map((item)=>{
newArr.push(item.content)
})
return newArr.join(',')
}
let data ={
applicateEvaluUrl:getVal(this.applicationFileList),
coldChainInformedUrl:getVal(this.coldChainFileList),
patientInformedUrl:getVal(this.patientFileList),
cardIdUrl:getVal(this.cardFileList),
prescriptionUrl:getVal(this.prescriptionFileList),
invoiceUrl:getVal(this.invoiceFileList),
invoiceList:this.invoiceFileList,
}
let rule ={
applicateEvaluUrl:'申请评估表',
coldChainInformedUrl:'冷链保存同书',
patientInformedUrl:'患者知情同意书',
cardIdUrl:'身份证原件',
prescriptionUrl:'处方笺',
invoiceUrl:'购药发票'
}
if(Object.keys(data).find(item=>data[item] == '')){
Toast(rule[Object.keys(data).find(item=>data[item] == '')]+'不能为空')
return false
}
axios.post(this.$my.api+'/wet/due/addGiveVisit',{...data})
.then(res => {
if(res.data.code == 200){
Toast(res.data.message)
if(that.detailId){ //编辑
that.$router.go(-1)
}else{//新增
that.$router.push('/')
}
}else{
Toast(res.data.message)
}
}, err => {
Toast('申请失败:'+err)
})
},
番外篇:图为去上海失恋博物馆照片,中了抖音的毒,跟着女友+朋友+朋友女友(百度大佬),去得瑟。
更多推荐
已为社区贡献14条内容
所有评论(0)