Vue Element ui Upload组件在上传文件时，动态切换 action上传路径-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue Element ui Upload组件在上传文件时，动态切换 action上传路径。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当我们在使用 Element ui，Upload组件时，官网默认的基础配置如下

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"  //这里目前是写死的上传路径
  :show-file-list="false"  //上传文件列表
  :on-success="handleAvatarSuccess"  //上传成功后的回调函数
  :before-upload="beforeAvatarUpload">  //上传文件之前的的回调函数
   <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

现在的需求是，如果页面只有一个 el-upload组件，需要上传的文件，根据不同的类型，切换不同的action 上传路径。

首先我这里选择，通过调用 before-upload 上传文件之前的钩子函数，函数接收一个参数，就是上传的文件信息，然后判断文件的类型，如果上传的是视频文件，那么就，动态重写 action 的上传路径，如果是图片或者音频，同样的动态写入相应的上传路径。

官网中，对上传文件之前的钩子函数，官网这里的描述，可能会让大家产生误导（官网没错，只是有的小伙伴理解错了）。结合描述查看下面有问题的错误写法。
Vue Element ui Upload组件在上传文件时，动态切换 action上传路径

错误写法：

<el-upload
  class="avatar-uploader"
  :action="AudioAndVideoPath"  //现在这里动态绑定地址参数
  :show-file-list="false"  //上传文件列表
  :on-success="handleAvatarSuccess"  //上传成功后的回调函数
  :before-upload="beforeAvatarUpload">  //上传文件之前的的回调函数
   <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

<script>
import { url } from '../../../api/Globaladdress/index'; //我这里导入全局地址总路径
export default {
 data() {
    return {
        url,   //全局地址
        AudioAndVideoPath: ``  //音视频上传动态路径
    }
 },
methods:{
 beforeAvatarUpload(file) {   //上传文件之前的函数
      console.log(file);   //接收上传的文件信息
      const isvideo = file.type === 'video/mp4';  //视频格式，查看上传的文件是不是视频或者音频文件格式，拿到一个Booleans 值
      const isaudio = file.type === 'audio/mpeg';  //音频格式
      if (isvideo) {  //判断如果isvideo等于true，代表，满足要求是视频格式。
             this.AudioAndVideoPath = this.url + "/upload/fileVideo";  //我这里采用字符串拼接，动态重写文件上传路径，这里的路径是专门上传视频的。
             return isvideo ;//（官网描述：如果返回false，就终止上传，那么这里，isvideo 能够进到if判断，就肯定为 true，按官网描述推理，如果返回true，就不会终止上传）
      } else if (isaudio) {  //判断是否满足音频格式，如果满足，动态重写，上传音频时的路径
           this.AudioAndVideoPath = this.url + "/upload/fileAudio";
           return isaudio ;//(上面描述同理)
       } else {   //如果上传文件不满足规定格式，再返回 false ，并提示，终止上传，不用配置上传路径。
            this.$message({
               message: '上传格式不准确!请上传视频或音频格式文件',
                  type: 'warning',
                  duration: 6000
                });
                return false ;//都不满足，再返回false终止上传。
            }
       },
       handleAvatarSuccess(response, file, fileList){   //上传成功后的回调函数（错误写法这里这里不会执行）
             console.log(response, file, fileList);
       }
    }
}
</script>

上述错误写法，会造成，跨域或重定向问题，错误代码404，因为上述错误写法，在我的 beforeAvatarUpload 钩子函数还没，执行的时候，Upload 组件中 action 路径方法已经调用了，而这时候，action 的动态路径还没有定义，所以，他会提示找不到路径，可能会导航到当前页面的本地地址，然后报错404。
Vue Element ui Upload组件在上传文件时，动态切换 action上传路径

正确写法如下：首先把 action动态绑定

<el-upload
  class="avatar-uploader"
  :action="AudioAndVideoPath"  //现在这里动态绑定地址参数
  :show-file-list="false"  //上传文件列表
  :on-success="handleAvatarSuccess"  //上传成功后的回调函数
  :before-upload="beforeAvatarUpload">  //上传文件之前的的回调函数
   <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

<script>
import { url } from '../../../api/Globaladdress/index' ;//我这里导入全局地址总路径
export default {
 data() {
    return {
        url,   //全局地址
        AudioAndVideoPath: ``  //音视频上传动态路径
    }
 },
methods:{
 beforeAvatarUpload(file) {   //上传文件之前的函数
      console.log(file);   //接收上传的文件信息
      const isvideo = file.type === 'video/mp4';  //视频格式，查看上传的文件是不是视频或者音频文件格式，拿到一个Booleans 值
      const isaudio = file.type === 'audio/mpeg';  //音频格式
      if (isvideo) {  //判断如果isvideo等于true，代表，满足要求是视频格式，返回一个 Promise 对象
         return new Promise((resolve) => {
             this.$nextTick(() => {
             this.AudioAndVideoPath = this.url + "/upload/fileVideo";  //我这里采用字符串拼接，动态重写文件上传路径，这里的路径是专门上传视频的。
               resolve();
             })
         })
      } else if (isaudio) {  //判断是否满足音频格式，如果满足，动态重写，上传音频时的路径
           return new Promise((resolve) => {
               this.$nextTick(() => {
                  this.AudioAndVideoPath = this.url + "/upload/fileAudio";
                    resolve();
               })
           })
       } else {   //如果上传文件不满足规定格式，则返回 false ，并提示，终止上传，不用配置上传路径。
            this.$message({
               message: '上传格式不准确!请上传视频或音频格式文件',
                  type: 'warning',
                  duration: 6000
                });
                return false;
            }
       },
       handleAvatarSuccess(response, file, fileList){   //上传成功后的回调函数
             console.log(response, file, fileList);
       }
    }
}
</script>