vue js 怎么实现在大文件上传的时候怎么点击×号让文件暂停上传 并且删除

在Vue.js中实现大文件上传时，通常会使用HTML5的File API以及第三方库如axios或vue-file-uploader等。当用户想要暂停并删除上传中的文件时，可以采用以下步骤：

1. **创建FileUploader组件**:
- 安装所需的库，例如`vue-file-upload`:

     npm install vue-file-upload axios

2. **在模板中设置上传按钮及暂停/删除功能**:

   <template>
     <div>
       <input type="file" ref="uploadInput" @change="handleFilesChange">
       <button @click="startUpload">开始上传</button>
       <button v-if="uploading" @click="cancelUpload">暂停/取消</button>
       <button v-if="uploading && confirm('是否真的要删除?')" @click.prevent="deleteFile">删除文件</button>
       <div v-if="previewUrl" :style="{ backgroundImage: 'url(\'' + previewUrl + '\')'}"></div>
     </div>
   </template>

3. **在methods中处理文件操作**:

   import axios from 'axios';
   
   export default {
     data() {
       return {
         uploading: false,
         previewUrl: null,
         files: []
       };
     },
     
     methods: {
       handleFilesChange(e) {
         this.files = e.target.files;
       },
       
       startUpload() {
         if (!this.uploading) {
           const file = this.files[0];
           this.uploading = true;
           this.upload(file);
         }
       },
       
       upload(file) {
         // 使用axios发起异步上传请求
         this.$http.post('/api/upload', { file }, {
           onUploadProgress: progress => {
             // 更新进度条
           },
           beforeSend: formData => {
             formData.append('file', file, file.name);
           },
           responseURL: 'https://your-api-url.com/file-progress',
         }).then(response => {
           this.previewUrl = response.data.url; // 获取预览链接
           // ...其他处理
         }).catch(error => {
           // 处理错误
         });
       },
       
       cancelUpload() {
         // 如果上传正在进行中，中断请求
         if (this.uploadRequest) {
           this.uploadRequest.abort();
         }
         this.uploading = false;
       },
       
       deleteFile() {
         // 删除服务器端的文件，这里只是一个示例
         axios.delete(`/api/files/${file.id}`, {}).then(() => {
           this.cancelUpload(); // 暂停上传并清理本地数据
           // 清除预览URL，从列表中移除文件等
         });
       }
     }
   }

4. **注意**: 这里假设你有一个后台API用于处理文件上传、暂停和删除，并且`$http`是基于axios的封装。

记得在实际项目中检查兼容性和添加错误处理。此外，`beforeSend`回调可以用于调整上传的FormData，而`responseURL`则可以让前端跟踪上传过程。