最近在使用Element UI做项目的时候，使用到了Upload 上传组件，因为要实现明确name的文件才可以上传，使用到了before-upload方法，发现

当auto-upload为false的时候，before-upload方法失效

当auto-upload为true的时候，before-upload方法有效

1.repo upload 提示 no branches ready for upload

https://blog.csdn.net/jinbaippdpdpdpdpd/article/details/74837987
2.repo: no branches ready for upload

http://www.voidcn.com/article/p-pofzamuv-ga.html

1.antd官网Upload组件：

https://ant.design/components/upload-cn/

2.下图是最近开发的上传文档的效果：



 

3.文件上传的实现：

（1）方法一：antd默认上传。

a：渲染文件上传组件。getPDFURL（）方法为实现文件的上传。showUploadList为是否展示 uploadList, true显示，false不显示，其可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIcon。type为上传按钮的图标。如下图所示。

{/* 渲染文件上传组件 */}
  <Upload {...this.getPdfURL()} showUploadList={false}>
     <Button>
       <Icon type="upload" /> 上传文件
     </Button>
  </Upload>

b：getPDFURL（）方法为实现文件的上传。name是发到后台的文件参数名。action为上传文件的地址。accept是接受上传的文件类型。headers是设置上传的请求头部，IE10 以上有效。onChange是上传文件改变时的状态。代码如下图所示。



下面为代码：

getPdfURL = () =>{
        const _this = this;
        const props = {
            name: 'file',
            action: AjaxUrl + 'data/modelFileUpload.svt?cou_id=' + this.state.cou_id,{/*文件上传接口和需要的传参*/}
            accept:"application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",{/*接受上传的文件类型：此处为.doc格式*/}
            headers: {
                authorization: 'authorization-text',
            },
            onChange(info) {//上传文件改变时的状态
                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (info.file.status === 'done') {
                    message.success(`${info.file.name} 上传成功！`);
                    _this.setState({
                        pdfUrl:AjaxUrl + info.file.response.url,
                        wordName:info.file.response.wordName
                    })

                } else if (info.file.status === 'error') {
                    message.error(`${info.file.name} 上传失败！`);
                }
            },
        };
        return props;
    }

注意：accept可以用于设置接口不同类型的文件类型，其不同文件类型设置可参考：https://www.haorooms.com/post/input_file_leixing

（2）方法二：使用customRequest通过覆盖默认的上传行为，自定义自己的上传实现。

a：渲染文件上传组件。accept是接受上传的文件类型。customRequest通过覆盖默认的上传行为，customRequest（）方法是自定义自己的上传实现。fileList是已经上传的文件列表（受控）。

<Upload
      accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      customRequest={this.customRequest}
      beforeUpload = {this.beforeUpload}
      fileList={this.state.fileList}
                >
     <Button>
       <Icon type='upload' />上传
     </Button>
</Upload>

b：customRequest（）方法是自定义自己的上传实现。

 

 customRequest = (option)=> {
          const formData = new FormData();
          const fileUrl = AjaxUrl+"data/fileUpload.svt";
          formData.append('files[]',option.file);
         
          reqwest({ /*官网解释：It's AJAX
                        All over again. Includes support
                        for xmlHttpRequest, JSONP, CORS,
                         and CommonJS Promises A.*/
            url: fileUrl,
            method: 'post',
            processData: false,
            data: formData,
            success: (res) => {
              //res为文件上传成功之后返回的信息，res.responseText为接口返回的值
              let fileInfo = JSON.parse(res.responseText);
              if(res){
                this.setState({
                    fileInfo:fileInfo,
                    loading: false,
                    uploading: false,
                    defaultFile:false
                })
              }
              
            },
            error: () => {
              this.setState({
                  loading: false,
                  uploading: false
              })
              message.error("文件上传失败！");
            },
          });
      }



注意：reqwest其实就是ajax异步请求。更多了解参考： https://www.npmjs.com/package/reqwest

说明：上述内容均是自己在开发过程中总结出来，或许还有不足之处，但是希望有些内容能够帮到大家，谢谢观赏！

 

 

 

 

 

 

这几天要在网站上增加一个图片从剪切板粘贴上传的功能，想利用el-upload组件来进行这个功能。

但是el-upload在官网里写的file-list参数不够满足我的需求，因为它表示已上传文件列表（就是后面打了绿色勾勾的，已经上传成功了的），我想改变的是已选择文件列表（包括已上传和未上传）。
那么el-upload里是否有哪个属性可以表示已选择文件列表呢？答案是有的，就是uploadFiles属性，在这里push，就可以达到和使用el-upload的选择文件按钮同样的效果。

当然，要记得设置好文件的status属性。
this.$refs.upload.uploadFiles.push(newFile);

另外，要将通过GetAsFile()得到的文件类型进行一步file.raw = file，将file本身添加到它的raw属性里才可以进行上传，不然会报找不到uid的错，这个我还没研究明白是怎么回事，可能是el-upload对文件的格式有特殊要求。