elementui el-upload附件上传--上传之前需要修改文件内容

最新推荐文章于 2024-04-24 09:22:16 发布

weixin_34248487

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量5.4k

点赞数 1

文章标签： javascript ui python ViewUI

原文链接：https://my.oschina.net/yxmBetter/blog/1647172

版权

2019独角兽企业重金招聘Python工程师标准>>>

官网案例

el-upload文件上传

问题分析

在文件上传之前需要做一些操作，所以考虑使用手动上传
官网代码粘贴

<el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

问题解决

考虑到上传文件内容的简单性，所以我在使用的时候一般都使用单文件上传，也就是不使用file-list上传，所以就不涉及到file-list和do-remove的使用
另外，因为在上传文件之前需要弹框改变文件的内容，或者加一些别的参数，所以考虑使用on-change方法，（文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用），可以直接通过判断文件的status来确定在哪个地方被调用的，其他地方可以直接return，确定以后，可以进行弹框修改内容，在弹框中增加手动上传文件的按钮，确定上传和取消上传
on-change具体使用可以查看官网，和别的方法使用方式一样
加油吧，有什么不懂可以留言哦

转载于:https://my.oschina.net/yxmBetter/blog/1647172