iview中upload支持上传excel配置accept

是的，iView的upload组件支持设置上传文件的类型。您可以在upload组件的属性中设置accept属性，其值为Excel文件的MIME类型或文件扩展名，例如“.xlsx”或“.xls”。这样iView就会只接受Excel文件格式的文件。具体的设置方式可以参考iView的文档：https://www.iviewui.com/components/upload

相关问题

如何通过iview的upload组件，将excel文件处理后上传至服务器

在iView UI库中，你可以使用`Upload`组件配合`Form`组件来上传Excel文件。首先，你需要安装`axios`库来发送HTTP请求，它可以帮助你处理文件上传。以下是步骤：

1. 安装依赖：

   npm install axios iview uploadjs --save

2. 引入必要的模块：

   import axios from 'axios';
   import Vue from 'vue';
   import Upload from 'iview/dist/components/upload';
   import Uploadjs from 'uploadjs'; // 或者使用其他的文件上传插件，如plupload等

3. 在Vue实例中注册`Upload`组件：

   Vue.component('upload', Upload);

4. 创建一个处理上传的组件，包含`Upload`和一些业务逻辑：

   export default {
     components: {
       Upload
     },
     data() {
       return {
         uploadFiles: [],
         form: {
           file: ''
         }
       };
     },
     methods: {
       handleSuccess(response, file, fileList) {
         if (response.success) {
           console.log('文件上传成功');
           // 在这里处理服务器返回的数据，比如更新状态
         } else {
           alert('文件上传失败');
         }
       },
       handlePreview(file) {
         // 展示Excel文件的内容，这一步取决于你如何处理上传后的数据，可以使用第三方库如xlsx解析Excel
         // 在这里仅做简单展示，实际操作时需自行处理
         let url = URL.createObjectURL(file.response);
         this.$Modal({
           title: '预览',
           content: `<img src="${url}">`,
           onShow: () => {
             setTimeout(() => {
               URL.revokeObjectURL(url);
             }, 2000); // 2秒后释放URL
           }
         });
       },
       handleRemove(file) {
         this.uploadFiles = this.uploadFiles.filter(item => item !== file);
       },
       handleSubmit() {
         // 将文件转换成Blob对象，然后使用uploadjs或者其他插件上传
         let file = this.form.file;
         let blob = new Blob([file]);
         const uploader = Uploadjs.create('uploader-id', {
           url: '/api/upload-excel', // 服务器接收文件的URL
           auto: true,
           fieldName: 'file', // 这里的fieldName需要和服务器端设置一致
           headers: {'Content-Type': 'multipart/form-data'}, // 设置头部信息
         });
         uploader.add(blob).then((result) => {
           this.handleSuccess(result, file, [file]);
         });
       }
     },
     // ...
   }

5. HTML模板部分：

   <template>
     <div>
       <!-- 省略其他组件 -->
       <upload :action="/api/upload-excel" :on-success="handleSuccess" :on-preview="handlePreview" :on-remove="handleRemove">
         <input slot="trigger" type="file" accept=".xls, .xlsx" ref="uploadInput" />
       </upload>
       <button @click="handleSubmit">上传</button>
     </div>
   </template>

注意：在服务器端你需要处理上传的Excel文件，解析其内容并存储到数据库中。上述代码展示了前端的部分逻辑，具体实现可能因服务器配置而异。

iview upload的上传成功失败 及成功监听

iview upload组件的上传成功和失败可以通过监听对应的事件来实现。

首先，需要在使用iview upload组件的地方加上对应的事件监听器。

上传成功的监听器可以使用`@on-success`属性来设置，例如：

<Upload
  :on-success="handleSuccess"
>
  <Button icon="ios-cloud-upload">上传文件</Button>
</Upload>

在这里，`handleSuccess`是一个自定义的方法，用于处理上传成功的逻辑。在该方法中，你可以接收到上传成功后的返回数据，并进行相关操作。

上传失败的监听器可以使用`@on-error`属性来设置，例如：

<Upload
  :on-error="handleError"
>
  <Button icon="ios-cloud-upload">上传文件</Button>
</Upload>

同样地，`handleError`是一个自定义的方法，用于处理上传失败的逻辑。在该方法中，你可以接收到上传失败的错误信息，并进行相应处理。

综上所述，你可以在你的代码中定义`handleSuccess`和`handleError`两个方法，分别处理上传成功和失败的逻辑。