鍍金池/ 問答/HTML/ element-ui點擊按鈕怎么觸發(fā)上傳?

element-ui點擊按鈕怎么觸發(fā)上傳?

如果官方默認(rèn)的上傳組件下面加了幾個字,怎么點擊字的時候也能實現(xiàn)上傳功能?

clipboard.png

回答
編輯回答
祉小皓

element 里面有一個手動上傳

<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">上傳到服務(wù)器</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>

api

2017年12月2日 19:41
編輯回答
小眼睛

通過css實現(xiàn)不就挺好?將element上傳組件的可點擊區(qū)域覆蓋到點擊上傳。 使得點擊 ”點擊上傳“ 就是點擊了上傳組件

2018年8月26日 04:52