利用Vue.js提升上传体验：文件处理的“瑞士军刀”

Element UI中的文件上传组件

在我们的日常开发中，上传文件是一个很普遍的需求。这时候大家使用Vue的都会想到el-upload这个组件，但我们的需求中，经常都是需要上传多个文件，传参等。此时就需要我们来使用他之中的http-request参数。

使用el-upload组件上传文件有以下几个步骤：

1. 导入el-upload组件：

import { ElUpload } from 'element-ui';

Vue.component('el-upload', ElUpload);

2. 在您的模板中使用el-upload组件：

<el-upload
  action="/upload"
  :multiple="true"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或单击以选择文件</div>
  <button type="button" class="el-button el-button--primary" slot="tip">上传</button>
</el-upload>

3. 在您的脚本中处理上传成功的事件：

methods: {
  handleSuccess(response) {
    console.log('上传成功', response);
  },
  handleError(error) {
    console.log('上传失败', error);
  },
}

4. 在您的脚本中处理上传错误的事件：

methods: {
  handleSuccess(response) {
    console.log('上传成功', response);
  },
  handleError(error) {
    console.log('上传失败', error);
  },
}

使用http-request上传文件

如果需要使用http-request参数上传文件，可以在el-upload组件中设置以下属性：

<el-upload
  action="/upload"
  :multiple="true"
  :http-request="httpRequest"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或单击以选择文件</div>
  <button type="button" class="el-button el-button--primary" slot="tip">上传</button>
</el-upload>

methods: {
  httpRequest(file) {
    const formData = new FormData();
    formData.append('file', file);

    return axios({
      url: '/upload',
      method: 'post',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
  },
  handleSuccess(response) {
    console.log('上传成功', response);
  },
  handleError(error) {
    console.log('上传失败', error);
  },
}

常见问题

1. 如何上传多个文件？

可以通过设置el-upload组件的multiple属性为true来实现。

<el-upload
  action="/upload"
  :multiple="true"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或单击以选择文件</div>
  <button type="button" class="el-button el-button--primary" slot="tip">上传</button>
</el-upload>

2. 如何处理上传成功的事件？

可以在el-upload组件中设置on-success属性来处理上传成功的事件。

<el-upload
  action="/upload"
  :multiple="true"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或单击以选择文件</div>
  <button type="button" class="el-button el-button--primary" slot="tip">上传</button>
</el-upload>

methods: {
  handleSuccess(response) {
    console.log('上传成功', response);
  },
}

3. 如何处理上传错误的事件？

可以在el-upload组件中设置on-error属性来处理上传错误的事件。

<el-upload
  action="/upload"
  :multiple="true"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或单击以选择文件</div>
  <button type="button" class="el-button el-button--primary" slot="tip">上传</button>
</el-upload>

methods: {
  handleError(error) {
    console.log('上传失败', error);
  },
}