为什么element-ui上传组件fileList写了默认的数据点击上传无反应？

Question

<template>
<div>

<el-upload
  class="upload-demo"
  ref="upload"
  :action="uRl"
  :data="uploadForm"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="uploadForm.fileList"
  :on-success="handleAvatarSuccess"
  :auto-upload="false"
  list-type="picture"
>
  <el-button
    slot="trigger"
    size="small"
    type="primary"
  >选取文件</el-button>
  <el-button
    style="margin-left: 10px;"
    size="small"
    type="success"
    @click="submitUpload('uploadForm')"
  >上传到服务器</el-button>

</el-upload>

</div>
</template>
<script>
export default {
data() {

return {
  uRl: "http://***********/userUpload",
  uploadForm: {
    sogo: "1",
    phone: "13822246870",
    P4_userId: "U171407",
    P6_credentialType: "FRONT_OF_ID_CARD",
  },
  fileList: [
      {
        name: "user.jpg",
        url: "http://********031323532.jpg"
      }
    ]
};

},
methods: {

submitUpload(uploadForm) {
  this.$refs.upload.submit();
  // console.log("a");
},
handleRemove(file, fileList) {
  // console.log(file, fileList);
},
handlePreview(file) {
  // console.log(file);
},
handleAvatarSuccess(res, file, fileList) {
  console.log(res);
}

}
};
</script>

Answer 1

它只支持本地上传，你的这个是网络地址肯定不支持

Answer 2

参考我的另一个回答 https://segmentfault.com/q/10...

在线图片提交上传，需要后端处理，从在线图片读取并下载。你的这个情况可以用base64转file上传。

下面是base64转file的核心代码：

function btof(data, fileName) {
  const dataArr = data.split(",");
  const byteString = atob(dataArr[1]);
  const options = {
    type: "image/jpeg",
    endings: "native"
  };
  const u8Arr = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    u8Arr[i] = byteString.charCodeAt(i);
  }
  return new File([u8Arr], fileName + ".jpg", options);
}

另外codepen示例中也有如何从url转为base64