标签：文件 vue const 回显 res 上传下载 file 上传 id
一.上传文件:
pc端
采用饿了么上传组件:<el-upload />
可以手动上传也可以立即上传
1.立即上传:
<el-upload
• ref="myUpload"
• :action="fileUploadApi + '?name=' + fileName"
• :headers="headers" // 设置请求头{'Authorization': getToken()}
• :on-error="uploadError"
• :on-success="uploadSuccess"
• :before-upload="uploadBefore"
• :on-change="uploadChange"
• :on-remove="uploadRemove"
• :file-list="fileList"
• :auto-upload="true"
• \>
• <el-button slot="trigger" size="small" type="primary">附件上传</el-button>
• </el-upload>2.手动上传
一般点击确认按钮,监听这个按钮的点击事件,然后 this.$refs.myUpload.submit(),进行上传文件操作;
uploadSuccess方法监听文件上传成功的回调函数,接收三个回调参数,response, file, fileList,response是接口返回值,,
里面会返回服务器存放文件的id,把id存到表单对象里,最后做表单提交
移动端,vant组件里的<van-uploader />
Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。
<van-uploader
• @delete="onDelete"
• v-model="fileList"
• multiple
• :after-read="afterRead"
• />文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。
data里定义fileId,用来存放上传文件返回的id
afterRead(*file*) {
• // 此时可以自行将文件上传至服务器
• console.log("file");
• console.log(*file*);
• *file*.status = "uploading";
• *file*.message = "上传中...";
• *const* fd = new *FormData*();
• fd.append("files", *file*.file);
• upload(fd)
• .then(*res* *=>* {
• *file*.status = "done";
• *file*.message = "上传成功...";
• // console.log(res.data[0], '文件上传');
• this.fileId.push(*res*.data[0].id);
• })
• .catch(() *=>* {
• // 上传失败
• *file*.status = "failed";
• *file*.message = "上传失败";
• });
• },
onDelete(file, detail) {
if (file.status == "failed") return;
this.fileId.splice(detail.index, 1);
},二.文件下载
1.如果下载需要权限
export *function* downloadFile(*obj*, *name*, *suffix*) {
*const* url = window.*URL*.createObjectURL(new *Blob*([*obj*]))
*const* link = document.createElement('a')
link.style.display = 'none'
link.href = url
*const* fileName = parseTime(new *Date*()) + '-' + *name* + '.' + *suffix*
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
downloadFile: function(id, name, suffix) {
meetingApi.downloadAttach(id).then(res => {
const blob = new Blob([res])
const url = window.URL.createObjectURL(blob)
const dom = document.createElement('a')
dom.style.display = 'none'
dom.href = url
dom.setAttribute('download', name + '.' + suffix)
document.body.appendChild(dom)
dom.click()
})
},2.下载不需要权限,直接打开新网页的方式就行了
window.location.href = `${process.env.VUE_APP_BASE_API}/api/localStorage/downloadFile/${id}`三.文件回显
以移动端为例,
<van-uploader
v-model="fileList"
preview-size="75px"
show-upload
:deletable="false"
@click-preview="clickPreview"
>
<div
v-if="fileList.length === 0"
style="color:#000;font-size:14px;"
>
附件无
</div>
<div v-else />
</van-uploader>这里是监听父组件传过来的formdata对象,里面的fj字段存放文件的id,拿这个id去获取文件的信息
watch: {
formData: {
handler(newVal) {
console.log(newVal);
const fm = new FormData();
fm.append("ids", newVal.fj);
getFileStorage(fm).then(res => {
if (!res.data) return;
const resData = res.data;
resData.map(item => {
item.url = process.env.VUE_APP_BASE_API + item.url;
});
this.fileList = resData;
});
},
immediate: true,
deep: true
}
},预览方法,如果是图片可以直接预览,其它类型文件需要借助其它的方法
clickPreview(file) {
console.log("预览", file);
// window.open("/editor/#/reader?fileId=xxx");
}标签：文件,vue,const,回显,res,上传下载,file,上传,id 来源： https://blog.csdn.net/m0_52189068/article/details/122040581
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。