<template> <div> <vue-upload-component :http="http" :multiple="true" :action="uploadUrl" :headers="headers" :accept="'image/*'" :extensions="allowedExtensions" :maxSize="maxFileSize" @input-filter="handleInputFilter" @before-upload="handleBeforeUpload" @uploading="handleUploading" @upload-success="handleUploadSuccess" @upload-error="handleUploadError" > <template v-slot:default> <div class="upload-area"> <div v-if="!isUploading"> <i class="iconfont icon-add"></i> <span class="text">点击上传</span> </div> <div v-else> <i class="iconfont icon-loading"></i> <span class="text">上传中...</span> </div> </div> </template> </vue-upload-component> <div class="preview-area"> <div v-for="(file, index) in uploadedFiles" :key="file.id"> <img :src="file.url" class="preview-image" /> <div class="preview-info"> <div class="preview-name">{{ file.name }}</div> <div class="preview-size">{{ fileSize(file.size) }}</div> <div class="preview-delete" @click="deleteFile(index)">删除</div> </div> </div> </div> </div> </template> <script> import VueUploadComponent from "vue-upload-component"; import request from '@/utils/request'; export default { components: { VueUploadComponent}, data() { return { http: request, uploadUrl: "/api/upload/plupload_task", headers: { 'Content-Type': 'multipart/form-data' }, // 请求头 isUploading: false, allowedExtensions: ["jpg", "jpeg", "png", "gif"], maxFileSize: 10 * 1024 * 1024, uploadedFiles: [], }; }, computed: { fileSize() { return function (size) { if (size < 1024) { return size + "B"; } else if (size < 1024 * 1024) { return (size / 1024).toFixed(2) + "KB"; } else { return (size / 1024 / 1024).toFixed(2) + "MB"; } }; }, }, methods: { handleInputFilter(uploadData) { if (uploadData.file.type.indexOf("image/") !== 0) { return Promise.reject("只能上传图片文件"); } return Promise.resolve(uploadData); }, handleBeforeUpload(uploadData) { this.isUploading = true; return uploadData; }, handleUploading(uploadData) { console.log("uploading", uploadData.progress); }, handleUploadSuccess(uploadData) { console.log("success", uploadData.url); const file = { id: uploadData.response.id, name: uploadData.file.name, size: uploadData.file.size, url: uploadData.response.url, }; this.uploadedFiles.push(file); this.isUploading = false; }, handleUploadError(uploadData) { console.error("error", uploadData.error); this.isUploading = false; }, deleteFile(index) { this.uploadedFiles.splice(index, 1); }, }, }; </script> 这段代码，为什么在选择文件后没反应了

根据代码，可能有以下几个原因导致选择文件后没有反应：

1. 检查浏览器是否支持 File API，因为该组件是基于 File API 开发的，如果浏览器不支持 File API，那么选择文件后就不会有反应。

2. 检查上传路径是否正确，因为上传路径是通过 `uploadUrl` 属性设置的，如果设置的路径不正确，那么选择文件后就无法上传。

3. 检查上传文件的大小和格式是否符合要求，因为在 `handleInputFilter` 方法中限制了上传文件的格式和大小，如果选择的文件不符合要求，那么就不会上传。

4. 检查服务器是否正常工作，因为上传文件需要与服务器进行交互，如果服务器出现问题，那么就无法上传文件。

相关问题

<vue-upload-component :http="http" :multiple="true" :action="uploadUrl" :headers="headers" :accept="'image/*'" :extensions="allowedExtensions" :maxSize="maxFileSize" @input-filter="handleInputFilter" @before-upload="handleBeforeUpload" @uploading="handleUploading" @upload-success="handleUploadSuccess" @upload-error="handleUploadError" > 这段代码有问题吗？

从代码上看，没有明显的问题。这段代码是基于 `vue-upload-component` 组件实现的文件上传功能，其中属性和事件的设置都符合该组件的要求。

不过，要确保以下几点：

1. `http` 对象是否正确配置了请求拦截器和响应拦截器，以确保上传请求能够正常发起。

2. `uploadUrl` 属性是否正确设置了上传文件的路径，以确保上传请求能够发往正确的地址。

3. `headers` 属性是否正确设置了请求头信息，以确保上传请求能够携带正确的请求头信息。

4. `allowedExtensions` 和 `maxFileSize` 属性是否正确设置了上传文件的格式和大小限制，以确保上传的文件符合要求。

如果以上几点都已经确认无误，那么这段代码就没有问题。

vue-upload-component多文件切片上传样例

以下是使用 vue-upload-component 组件实现多文件切片上传的示例代码：

<template>
  <div>
    <vue-upload-component
      ref="upload"
      :multiple="true"
      :chunk-size="chunkSize"
      :post-action="uploadUrl"
      :headers="headers"
      :query="query"
      @upload-success="onSuccess"
      @upload-error="onError"
      @before-chunk-upload="onBeforeChunkUpload"
      @after-chunk-upload="onAfterChunkUpload"
      @before-upload="onBeforeUpload"
      @after-upload="onAfterUpload"
    >
      <button>选择文件</button>
    </vue-upload-component>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        uploadUrl: 'your-upload-url',
        chunkSize: 2 * 1024 * 1024,  // 每个切片的大小，单位为字节
        headers: {  // 请求头
          'Authorization': 'Bearer your-token'
        },
        query: {  // 请求参数
          'param1': 'value1',
          'param2': 'value2'
        }
      }
    },
    methods: {
      onSuccess(response, file, fileList) {
        console.log('上传成功')
        console.log(response)
        console.log(file)
        console.log(fileList)
      },
      onError(err, file, fileList) {
        console.log('上传失败')
        console.log(err)
        console.log(file)
        console.log(fileList)
      },
      onBeforeChunkUpload(file, chunk) {
        console.log('开始上传切片')
        console.log(file)
        console.log(chunk)
      },
      onAfterChunkUpload(file, chunk, response) {
        console.log('切片上传完成')
        console.log(file)
        console.log(chunk)
        console.log(response)
      },
      onBeforeUpload(file, data) {
        console.log('开始上传')
        console.log(file)
        console.log(data)
      },
      onAfterUpload(response, file, fileList) {
        console.log('上传完成')
        console.log(response)
        console.log(file)
        console.log(fileList)
      }
    }
  }
</script>

在上面的代码中，除了基本的多文件上传属性外，还设置了以下属性：

- `chunk-size`：每个切片的大小，单位为字节。
- `headers`：请求头，用于传递认证信息等。
- `query`：请求参数，用于传递其他参数。
- `before-chunk-upload`：每个切片上传前的回调函数。
- `after-chunk-upload`：每个切片上传完成后的回调函数。
- `before-upload`：整个文件上传前的回调函数。
- `after-upload`：整个文件上传完成后的回调函数。

在回调函数中可以获取到上传的响应数据、上传的文件对象和文件列表等信息。