今天有一个坑, 同时要上传图片和文件, 而且图片要展示缩略图, 文件要展示列表.
我的思路是:
首先, 只上传附件照片, 这个直接看 ele 的官方例子就行, 不仅仅上传附件照片, 还同时上传其他参数.
然后, 再做上传照片和文件, 上传其他参数, 其实也就是文件合并.
同步到 sau 交流学习社区: https://www.mwcxs.top/page/465.html
一, 上传照片和其他参数
页面样式大约就是这样的, 参数有优先级, 发生时间, 服务单名称, 服务单描述, 图片附件上传.
(一) 视图部分代码:
- <el-form-item prop="image" label="图片附件上传">
- <el-upload
- ref="upload"
- :action="uploadAction"
- :beforeUpload="beforeUploadPicture"
- :on-change="imageChange"
- list-type="picture-card"
- name="files"
- :data="paramsData"
- :limit="3"
- multiple
- :auto-upload="false"
- :on-preview="handlePictureCardPreview"
- :on-remove="handleRemovePicture">
- <i class="el-icon-plus"></i>
- </el-upload>
- <el-dialog :visible.sync="dialogVisible">
- <img width="100%" :src="dialogImageUrl" alt="">
- </el-dialog>
- </el-form-item>
- <el-button size="mini" type="primary" @click="confirm()"> 确 定 </el-button>
说明:
1,action 变量为后端图片接口的地址
2,beforeUpload 方法是指的上传之前触发的函数, 可以用来做前端文件格式判断, 文件大小判断
3,on-change 方法是指每次选择文件都会触发函数, 可以用来前端删除和添加照片
4,list-type 属性指的是照片 picture-card 展示的方式
5,name 指的是上传的文件字段名, 这是后端确认文件流的字段名, 可以随便写
6,data 属性指的是上传时附带的额外参数, 这是指的其他参数
7,limit 属性指的是上传文件的个数极限.
8,multiple 属性指的是可以每次多选文件, true 为多选, false 为单选
9,auto-upload 属性指的是自动上传的, true 为可以自动上传, false 为不可以自动上传
10,on-preview 方法指的是查看缩略图的方法
11,on-remove 方法指的是删除文件的方法
12,ref 绑定 dom 元素
(二)data 部分代码
- data () {
- return {
- selectedCategorySpe: this.selectedCategory,
- serviceForm: {
- title: '',
- desc: '',
- priority: '',
- occurDate: ''
- },
- dialogImageUrl: '',
- dialogVisible: false,
- uploadAction: "/inner/event/order/submit/submit" + "&accessToken=" + this.$store.getters.token
- }
- },
(三)computed 部分代码
- computed: {
- ...mapGetters([
- 'constConfig'
- ]),
- paramsData: function () {
- let params = {
- eventCategory: this.selectedCategorySpe.categoryId,
- priority: this.serviceForm.priority,
- title: this.serviceForm.title,
- dsc: this.serviceForm.desc,
- occurDate: this.serviceForm.occurDate
- }
- return params
- }
- },
使用 computed 实现实时监测 paramsData 的值, 只要 selectedCategorySpe.categoryId,serviceForm.priority,serviceForm.title
,serviceForm.desc,serviceForm.occurDate 中只有一个变化, 都会重新计算 paramsData 的值.
(四)methods 部分方法
- beforeUploadPicture(file){
- const isImage = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg' || file.type == 'image/bmp' || file.type == 'image/gif' || file.type == 'image/webp';
- const isLt2M = file.size <1024 * 1024 * 2;
- if (!isImage) {
- this.$message.error('上传只能是 png,jpg,jpeg,bmp,gif,webp 格式!');
- }
- if (!isLt2M) {
- this.$message.error('上传图片大小不能超过 2MB!');
- }
- return isImage && isLt2M;
- },
- handlePictureCardPreview(file) {
- this.dialogImageUrl = file.url;
- this.dialogVisible = true;
- },
- handleRemovePicture(file, fileList) {
- console.log(file, fileList);
- },
- imageChange(file, fileList, name) {
- console.log(file, fileList);
- },
- confirm(){
- this.$refs.upload.submit();
- }
说明: confirm 使用 ref 的绑定的 upload, 紧接着调用 form 的表单的 submit 方法. 这个 vue 已经封装好了, 这时候传的参数可以看到 post 传递的文件对象.
二, 同时上传图片和文件, 并且图片可以看缩略图文件显示成列表
但是当你出现这样的需求的时候, 一脸蒙蔽
(一) 视图部分代码
- <el-form-item prop="image" label="图片附件上传">
- <el-upload
- ref="uploadImage"
- :action="uploadAction"
- :beforeUpload="beforeUploadPicture"
- :on-change="imageChange"
- list-type="picture-card"
- name="files"
- :limit="3"
- multiple
- :auto-upload="false"
- :on-preview="handlePictureCardPreview"
- :on-remove="handleRemovePicture">
- <i class="el-icon-plus"></i>
- </el-upload>
- <el-dialog :visible.sync="dialogVisible">
- <img width="100%" :src="dialogImageUrl" alt="">
- </el-dialog>
- </el-form-item>
- <el-form-item prop="image" label="文件附件上传">
- <el-upload
- ref="uploadFile"
- class="upload-demo"
- name="files"
- :on-change="fileChange"
- :action="uploadAction"
- :on-preview="handlePreviewFile"
- :on-remove="handleRemoveFile"
- :before-remove="beforeRemoveFile"
- multiple
- :auto-upload="false"
- :limit="3"
- :on-exceed="handleExceedFile"
- :file-list="fileList">
- <el-button size="small" type="primary"> 点击上传 </el-button>
- <!--<div slot="tip" class="el-upload__tip"> 只能上传文件, 且不超过 2M</div>-->
- </el-upload>
- </el-form-item>
- <el-button size="mini" type="primary" @click="confirm()"> 确 定 </el-button>
(2)data 部分数据
- data () {
- return {
- selectedCategorySpe: this.selectedCategory,
- serviceForm: {
- title: '',
- desc: '',
- priority: '',
- occurDate: '',
- },
- images: {},
- files: {},
- dialogImageUrl: '',
- dialogVisible: false
- }
- },
(3)method 部分数据
- beforeUploadPicture(file){
- const isImage = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg' || file.type == 'image/bmp' || file.type == 'image/gif' || file.type == 'image/webp';
- const isLt2M = file.size <1024 * 1024 * 2;
- if (!isImage) {
- this.$message.error('上传只能是 png,jpg,jpeg,bmp,gif,webp 格式!');
- }
- if (!isLt2M) {
- this.$message.error('上传图片大小不能超过 2MB!');
- }
- return isImage && isLt2M;
- },
- handlePictureCardPreview(file) {
- this.dialogImageUrl = file.url;
- this.dialogVisible = true;
- },
- handleRemovePicture(file, fileList) {
- console.log(file, fileList);
- },
- imageChange(file, fileList, name) {
- console.log(file, fileList);
- this.imageList = fileList;
- this.images[''] = fileList;
- },
- handleRemoveFile(file, fileList) {
- console.log(file, fileList);
- },
- handlePreviewFile(file) {
- console.log(file);
- },
- handleExceedFile(files, fileList) {
- this.$message.warning(` 当前限制选择 3 个文件, 本次选择了 ${files.length} 个文件, 共选择了 ${files.length + fileList.length} 个文件 `);
- },
- beforeRemoveFile(file, fileList) {
- return this.$confirm(` 确定移除 ${ file.name }?`);
- },
- fileChange(file,fileList) {
- console.log(file, fileList);
- this.fileList = fileList;
- this.files[''] = fileList;
- },
- confirm(){
- let wfForm = new FormData();
- wfForm.append( 'eventCategory',this.selectedCategorySpe.categoryId)
- wfForm.append( 'priority',this.serviceForm.priority)
- wfForm.append( 'title',this.serviceForm.title)
- wfForm.append( 'dsc',this.serviceForm.desc)
- wfForm.append( 'occurDate',this.serviceForm.occurDate)
- Object.entries(this.images).forEach(file => {
- file[1].forEach(item => {
- wfForm.append('files', item.raw)
- wfForm.append(item.name, file[0])
- })
- })
- Object.entries(this.files).forEach(file => {
- file[1].forEach(item => {
- wfForm.append('files', item.raw)
- wfForm.append(item.name, file[0])
- })
- })
- createEventOrder(wfForm).then( res => {
- console.log(res, 'res')
- if(res.retValue === 1){
- this.$message.success( '成功创建服务单' );
- this.handleClose()
- }else{
- }
- })
- }
说明一下, 新建了 this.files 存文件列表, this.images 存图片列表. 在 confirm 中新建一个 FormData 对象, 使用 append 方法将参数变量加到数据对象中, 和文件对象. 最后将 FormData 对象传给后端.
传递的参数截图如下:
来源: https://www.cnblogs.com/chengxs/p/10047376.html