[ElemeFE/element]Upload可以携带其他的post参数吗?

http://element.eleme.io/#/zh-CN/component/upload#attribute

data

已找到

楼主可以帮忙给个示例吗，我这里用data不起作用。

============ 不是不起作用，而是不能在在 before-upload 的时候再到后台去取 uploadtoken。此时是异步的，会有问题。

@transtone

            <el-upload
                    action="http://up.qiniu.com/"
                    type="drag"
                    :multiple="true"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :default-file-list="fileList"
                    :data="upload_data"
                    accept="audio/*,video/*,image/*"
            >
                <i class="el-icon-upload"></i>
                <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5Mb</div>
            </el-upload>

我也是用了这个组件，是这么写的，但是每次上传都要点击两次才能上传成功，想问下，各位是否遇到过这个情况，是否有个bug呢还是我写的有问题？ <el-upload action="/backend/user/profiles/bankCardPicture" name="bankCardPicture" :data="userId" :before-upload="beforeBankCardPictureUpload" class="upload-demo" :on-error="handleUploadError" :with-credentials="true" :show-file-list="pictures.bankCardPicture[0].show_file_list" :on-remove="handleBankCardPictureRemove" :on-success="handleBankCardPictureSuccess" :file-list="pictures.bankCardPicture">

yym08103667@gmail.com

发件人： rainwsy 发送时间： 2017-02-28 01:14 收件人： ElemeFE/element 抄送： Subscribed 主题： Re: [ElemeFE/element] Upload可以携带其他的post参数吗? (#2895) @transtone <el-upload action="http://up.qiniu.com/" type="drag" :multiple="true" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :on-error="handleError" :default-file-list="fileList" :data="upload_data" accept="audio/,video/,image/*"

将文件拖到此处，或点击上传

只能上传jpg/png文件，且不超过5Mb

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

@transtone 场景和我类似，我是阿里云OSS，这时候需要在上传前先拿到签名串设置进去再传图片，但是呢，因为都是异步，图片就可能在还没设置的时候就上传了。我尝试过不使用自动上传，再通过submit进行上传，可惜，这个上传组件，在before-upload这一步的时候，这个组件已经对本次的图片进行配置了参数，我们在获取回来设置参数只有在下一次才有效。就坑在这里了

@hasbug 可以再上传前把参数写在data里

@rainwsy 也是个办法，但我的项目还有个坑，每次上传的图片都需要向后端请求个文件名进行配置（传到阿里云OSS，避免重名覆盖），这个就不知道放哪里处理了，因为这里还涉及到当前文件后缀的读取。

@hasbug 可以在on-change事件里面修改data属性。

`` < el-upload ref="upload" class="avatar-uploader" action="http://xxxxxx" :data="formData" :multiple="false" :auto-upload="false" :name="upload" :on-success="handleAvatarSuccess" :on-change="handleChange" :before-upload="beforeAvatarUpload">

       <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
     </el-upload >

`` handleChange(file, fileList) { //选择完文件后的状态 if (file.status == 'ready') { this.formData = { path: this.path, name: file.name } } submitUpload() { this.$refs.upload.submit(); }

`

@transtone 防止第一次请求带不上表单其他参数。根据我的经验，是nextTick相关。

 this.uploadData = {       
        params
 };
//防止第一次请求带不上表单其他参数
this.$nextTick(() => {
       this.$refs.upload.submit();
});

欢迎进入QQ群471838073讨论

哪位大佬告诉我，为什么我的el-upload里面的action填写完后台地址，默认发送的请求是get

@pro-xiaoy 有demo吗

@cntaoyu

@cntaoyu thanks you 我好好研究下，大佬你可以把你的源码发给我看看吗不胜感谢。之前人被别的项目借走了

@transtone

在before-upload钩子中请求uploadToken，只需要返回promise就行了。

const before = this.beforeUpload(rawFile);
     // 返回promise
      if (before && before.then) {
        before.then(processedFile => {
          const fileType = Object.prototype.toString.call(processedFile);

          if (fileType === '[object File]' || fileType === '[object Blob]') {
            if (fileType === '[object Blob]') {
              processedFile = new File([processedFile], rawFile.name, {
                type: rawFile.type
              });
            }
            for (const p in rawFile) {
              if (rawFile.hasOwnProperty(p)) {
                processedFile[p] = rawFile[p];
              }
            }
            this.post(processedFile);
          } else {
            this.post(rawFile);
          }
        }, () => {
          this.onRemove(null, rawFile);
        });

不过从这里可以看出，before-upload里面应该只做文件相关处理

@transtone 场景和我类似，我是阿里云OSS，这时候需要在上传前先拿到签名串设置进去再传图片，但是呢，因为都是异步，图片就可能在还没设置的时候就上传了。我尝试过不使用自动上传，再通过submit进行上传，可惜，这个上传组件，在before-upload这一步的时候，这个组件已经对本次的图片进行配置了参数，我们在获取回来设置参数只有在下一次才有效。就坑在这里了

大佬，我是这样解决的：

beforeAvatarUpload(file) { console.log(file); let param = { name: file.name, type: 1 }; return this.$api.common.getOSSUploadPolicy(param).then(res => { console.log(res); const { policy, oss_accesskey_id, callback, signature, expire, host, filename, dir } = res.data.data; this.uploadExtraParam = { host, key: (dir ? dir + "/" : "") + filename, policy: policy, OSSAccessKeyId: oss_accesskey_id, success_action_status: "200", //让服务端返回200,不然，默认会返回204 callback: callback, signature: signature }; console.log(this.uploadExtraParam); }); }

return一个promise对象就好了