使用element-ui组件库上传文件及自定义上传文件(包含多文件上传及自定义上传携带其他参数)

最新推荐文章于 2024-09-25 16:12:36 发布

BUG不加糖

最新推荐文章于 2024-09-25 16:12:36 发布

阅读量7.1k

点赞数 4

分类专栏：总结文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/yx0711/article/details/127815856

版权

总结专栏收录该内容

50 篇文章 1 订阅

订阅专栏

文章目录

使用element-ui组件库上传文件及自定义上传文件

使用element-ui组件库上传文件及自定义上传文件

组件使用

使用上传组件需要引入并注册Upload组件而这个组件中又用到了Button，所以也需要注册一下Button，我们只需要在main.js(new Vue实例的文件里边)，加上下边的代码

//引入
import import { Upload , Button } from 'element-ui'
//注册
Vue.component(Upload.name, Upload)
Vue.component(Button.name, Button)

官网中有好几种上传的代码，但是总的来说就两种，一种是直接上传的，一种是手动上传的，其他的就是样式稍微变了一下，用法什么的都差不多，所以这里只复制了一下自动上传和手动上传的两个例子的代码来说明一下element-ui提供给我们的一些方法的使用

一些属性值及函数

属性名	类型	作用
action(必选)	字符串	指定提交的接口
multiple	布尔值	是否支持多文件上传
drag	布尔值	是否启用拖拽
on-preview	函数	点击文件列表中已上传的文件时执行的函数
on-remove	函数	文件列表移除文件时执行的函数
on-success	函数	文件上传成功时执行的函数
on-error	函数	文件上传失败时执行的函数
on-change	函数	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
before-upload	函数	上传文件之前执行的函数
before-remove	函数	删除文件之前执行的函数
auto-upload	布尔值	是否选取文件后立即进行上传
file-list	数组	上传的文件列表
http-request	函数	覆盖掉默认上传的行为
disabled	布尔值	是否禁用
limit	数字	最大允许上传个数
on-exceed	函数	超出个数限制时执行的函数

其中的一些函数我们在自动上传中不好说明，所以上边的一些属性和方法的用法演示主要在自定义上传中演示

提示信息的配置

在上传的文件中的官方代码中我们不仅用到Upload组件和Button组件，同时还需要引入提示信息的一个的一个模块和提示信息的一个模块

只需要在上边组件使用的代码修改为

//引入
import import { Upload , Button , MessageBox ,Message } from 'element-ui'
//注册
Vue.component(Upload.name, Upload)
Vue.component(Button.name, Button)
//往Vue原型中添加方法，这样的话我们才能在全局里边通过this来直接访问到
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$message=Message

上边往Vue原型中添加方法我们用到了Vue原型中的一个关系,即VueComponent.prototype.proto===Vue.prototype

同时MessageBox中不仅包含我们用到的confim也包含其他的一些提示类的方法

this.$confim()会出现一个带确定和取消按钮的弹窗，同时函数执行会返回一个promise对象，我们可以在其.then方法中执行点击确定的回调，在.catch中执行取消的回调

this. $m e s s a g e . x x x () 会出现一个提示框，提示框的类型分为四种，分别是成功 (x x x 的值是 s u c c e s s) ，错误 (x x x 的值是 e r r o r) 、警告 (x x x 的值是 w a r n i n g) 以及消息 (不写 m e s s a g e 后边的东西) ，我们通过修改$ message点后边的的值,当然我们这里只是说简单的说明一下我们这里用到的，想要了解具体的可以看官方文档去细致的了解一下

直接上传

直接上传顾名思义就是我们上传图片的时候，上传完它就会"立即"上传给action所指定的url连接

<template>
  <el-upload
    class="upload-demo"
    action=""
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-change="handelChange"
    :limit="3"
    :on-exceed="handleExceed"
    :file-list="fileList"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <!-- 用于指定上传文件下的文字说明 -->
    <div slot="tip" class="el-upload__tip">
      只能上传jpg/png文件，且不超过500kb
    </div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      //初始化上传列表
      fileList: [],
    };
  },
  methods: {
    handelChange(file,fileList){
      console.log("文件修改执行的函数", file, fileList);
      this.fileList=fileList;
    },
    handleRemove(file, fileList) {
      console.log("移除文件执行的函数", file, fileList);
      this.fileList=fileList;
    },
    handlePreview(file) {
      console.log("点击已经上传的文件", file);
    },
    handleSuccess() {
      this.$message.success("上传成功");
    },
    handleError() {
      this.$message.error("上传失败");
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      console.log('移除之前执行的函数',fileList);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>

<style>
</style>

手动上传

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action=""
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :on-change="handelChange"
      name="cover"
      :multiple="true"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <el-button @click="handelSend">上传</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handelChange(file, fileList) {
      this.fileList = fileList;
      console.log("文件修改执行的函数", file, fileList);
    },
    handleRemove(file, fileList) {
      console.log("移除文件执行的函数", file, fileList);
      this.filesList = fileList;
    },
    handlePreview(file) {
      console.log("点击已经上传的文件", file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      console.log("移除之前执行的函数", fileList);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handelSend() {
        this.$refs.upload.submit();
    },
  },
};
</script>

<style>
</style>

手动上传只是手动触发一下上传的事件并没有特别的地方

自定义上传方式

在平常的开发中我们经常会有上传图片的需求，然而仅仅使用element-ui上给我们的案例的话，并不能满足全部的开发场景（例如上传文件的同时还需要上传多个其他数据），所以我们就需要自定义上传方式，同时官方文档中也给了我们自定义的方式，但是我们这里的例子跟官方文档给我们的例子并不是完全一样

这里为了说明一些细节，我们就采用多文件上传，并上传其他参数，最终点击确定按钮的时候在上传文件的方式来说明问题

实现多文件上传的方式有两种，这两种方式大概都差不多，只不过有一种方式有一个细节需要我们注意一些

方式一(利用fileList)

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action=""
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :on-change="handelChange"
      name="cover"
      :multiple="true"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <el-button @click="handelSend">上传</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handelChange(file, fileList) {
      this.fileList = fileList;
      console.log("文件修改执行的函数", file, fileList);
    },
    handleRemove(file, fileList) {
      console.log("移除文件执行的函数", file, fileList);
      this.filesList = fileList;
    },
    handlePreview(file) {
      console.log("点击已经上传的文件", file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      console.log("移除之前执行的函数", fileList);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handelSend() {
      console.log("上传文件", this.fileList);
      //   这里需要判断一下文件大小或者类型
      //   自定义上传就需要我们使用fromdata对象来上传文件
      let formdata = new FormData();
      for (let i = 0; i < this.fileList.length; i++) {
        // 我们上传的文件保存在每个文件对象的raw里边
        formdata.append("file", this.fileList[i].raw);
      }
      //   添加其他属性
      formdata.append("something", "something");
      // 发送请求
    },
  },
};
</script>

<style>
</style>

方式二(利用官方提供的http-request函数)

利用官方提供的http-request函数自定义上传的话我们需要利用到官方给我们提供的手动上传的一个方式submit方法,同时我们还有一个特别注意的点就是http-request函数执行的次数，具体的我们看下边的代码

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action=""
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :on-change="handelChange"
      :http-request="uploadFile"
      name="cover"
      :multiple="true"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <el-button @click="handelSend">上传</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handelChange(file, fileList) {
      this.fileList = fileList;
      console.log("文件修改执行的函数", file, fileList);
    },
    handleRemove(file, fileList) {
      console.log("移除文件执行的函数", file, fileList);
      this.filesList = fileList;
    },
    handlePreview(file) {
      console.log("点击已经上传的文件", file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      console.log("移除之前执行的函数", fileList);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 方法二
    handelSend() {
      let formdata = new FormData();
      //   定义一个fromdata对象用于
      this.formdata = formdata;
      //   触发提交文件(执行submit()这个函数会根据有多少个文件就执行多少次http-requests所绑定的函数)
      this.$refs.upload.submit();
      this.formdata.append("something", "something");
      //   发送请求,这里上传的的是this.fromdata而不是this.fileList
    },
    uploadFile(file) {
      // 判断文件
      console.log("自定义上传文件", file);
      this.formdata.append("file", file.file);
    },
  },
};
</script>

<style>
</style>

需要注意的是我们自定义上传的方式并不会触发上传失败和上传成功的函数，所以需要我们自己根据上传情况手动调用

总结

以上就是我上传文件的一些分享。另外给大家分享一下按需引入的小技巧，对于初学者的我们来说有时候按需引入并不知道引入什么，一般情况下我们引入的是官方文档中el后边的东西，然后我就发现官方文档的左边导航栏的字母正好就是我们按需引入的所要引入的东西（当然有时候我们不仅需要引入导航栏的字母也需要我们引入el后边的东西），而有些是通过this.$xxx的方式调用的，这篇博客也差不多包含了需要这种调用的全部东西了。

这周的分享就到这里了，下周继续努力吧！！！！