解决上传图片后点击或拖拽文件到这里进行上传下面有一行文字一直在转圈圈
时间: 2024-11-15 08:30:36 浏览: 10
html 上传图片,实现拖拽文件上传,上传后页面显示图片信息,可以点击图片放大
5星 · 资源好评率100%
这个问题通常是由文件上传处理过程中的状态反馈机制引起的。在您提供的代码中,没有明显的指示来处理上传进度的UI显示问题。以下是一些可能的解决方案:
### 解决方案一:显示加载指示器
可以在上传过程中显示一个加载指示器,并在完成时隐藏它。
1. **添加加载指示器状态**:
在`data()`函数中添加一个布尔值属性,用于跟踪上传状态。
```javascript
data() {
return {
fileList: [],
imageList: [],
loading: false, // 新增加载指示器状态
columns: [
{ title: '图片id', dataIndex: 'id', key: 'id' },
{ title: '图片地址', dataIndex: 'url', key: 'url' },
{ title: '缩略图', dataIndex: 'thumb', key: 'thumb', scopedSlots: { customRender: 'customThumb' } },
{ title: '源文件名', dataIndex: 'srcName', key: 'srcName' },
{ title: '删除链接', dataIndex: 'del', key: 'del' },
],
};
}
```
2. **修改`handleUpload`方法**:
在开始上传时设置`loading`为`true`,上传完成后设置为`false`。
```javascript
methods: {
async handleUpload({ file }) {
this.loading = true; // 开始加载
const formData = new FormData();
formData.append('image', file);
formData.append('token', '0ace6f265f2dd2cb1f97ac412c4ddc3e');
try {
const response = await fetch(`${process.env.VUE_APP_API_URL}/api/index.php`, {
method: 'POST',
body: formData,
});
const result = await response.json();
if (result.code === 200) {
this.imageList.push({
id: result.id,
srcName: result.srcName,
url: result.url,
thumb: result.thumb,
del: result.del,
});
} else {
console.error('上传失败', result.message);
}
} catch (error) {
console.error('请求错误', error);
} finally {
this.loading = false; // 结束加载
}
},
handleChange(info) {
this.fileList = info.fileList;
},
},
```
3. **更新模板**:
在模板中使用加载指示器。
```html
<template>
<div>
<a-upload multiple :customRequest="handleUpload" :fileList="fileList" @change="handleChange">
<a-button icon="upload">点击上传</a-button>
</a-upload>
<a-spin v-if="loading"></a-spin> <!-- 显示加载指示器 -->
<a-table :columns="columns" :dataSource="imageList" rowKey="id">
<template slot="customThumb" slot-scope="text, record">
<img style="width: 80px; height: 80px" :src="record.thumb" />
</template>
</a-table>
</div>
</template>
```
通过以上步骤,您可以有效地管理文件上传的状态,并在上传过程中显示一个加载指示器,以告知用户上传正在处理中。
阅读全文