使用elementUI调用一次接口同时上传图片和文件,同时需要携带其他参数,如何调用后端接口的实现

2018-12-07 admin

今天有一个坑,同时要上传图片和文件,而且图片要展示缩略图,文件要展示列表。

我的思路是:

首先,只上传附件照片,这个直接看ele的官方例子就行,不仅仅上传附件照片,还同时上传其他参数。

然后,再做上传照片和文件,上传其他参数,其实也就是文件合并。

一、上传照片和其他参数

页面样式大约就是这样的,参数有优先级,发生时间,服务单名称,服务单描述,图片附件上传。

clipboard.png

(一)视图部分代码:

<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传递的文件对象。

clipboard.png

二、同时上传图片和文件,并且图片可以看缩略图文件显示成列表

但是当你出现这样的需求的时候,一脸蒙蔽

clipboard.png

(一)视图部分代码

<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对象传给后端。

传递的参数截图如下:

clipboard.png

原文链接:https://segmentfault.com/a/1190000017297187

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47534.html

文章标题:使用elementUI调用一次接口同时上传图片和文件,同时需要携带其他参数,如何调用后端接口的实现

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
回到顶部