el-upload 上传同名图片不刷新
时间: 2023-06-29 08:03:42 浏览: 55
如果你上传的图片与之前已经存在的同名图片相同,那么可能会导致浏览器缓存问题,从而不刷新。你可以通过以下几种方式解决这个问题:
1. 在 el-upload 组件中设置 :with-credentials="true" 属性,这样每次上传都会带上 cookies,从而避免浏览器缓存。
2. 在后端代码中修改图片名称,避免上传的图片与已存在的同名图片相同。
3. 在前端代码中,每次上传图片时,在图片名称后面加上一些随机字符串,避免上传的图片与已存在的同名图片相同。例如:
```javascript
const randomString = Math.random().toString(36).substring(2);
const filename = file.name + '-' + randomString;
```
这样每次上传都会生成一个新的文件名,即使图片内容相同也不会覆盖原有的同名图片。
相关问题
el-upload 校验同名文件
可以通过设置 `before-upload` 属性来进行同名文件的校验。具体实现方式如下:
1. 在 `before-upload` 方法中,获取当前上传的文件列表和已经上传的文件列表。
2. 遍历当前上传的文件列表,判断是否有同名文件。
3. 如果有同名文件,则返回 `false`,否则返回 `true`。
以下是示例代码:
```html
<el-upload
class="upload-demo"
action="/upload"
:before-upload="beforeUpload"
>
<el-button slot="trigger">选取文件</el-button>
<el-button style="margin-left: 10px;" type="primary">上传到服务器</el-button>
</el-upload>
```
```javascript
data() {
return {
fileList: [], // 已经上传的文件列表
};
},
methods: {
beforeUpload(file) {
const isExist = this.fileList.some(item => item.name === file.name);
if (isExist) {
this.$message.error('同名文件已存在!');
return false;
}
return true;
},
},
```
el-upload上传图片缩略显示不出来
可能是由于缺少设置图片样式的原因导致上传的图片无法显示缩略图。在使用el-upload组件上传图片时,可以通过设置list-type属性为picture-card,然后在上传成功的回调函数中设置图片的样式。
你可以尝试以下步骤来解决问题:
1. 确保在el-upload组件中设置了list-type属性为picture-card,这样可以显示图片的缩略图。
2. 在上传成功的回调函数中,根据返回的文件URL设置缩略图的样式。你可以使用CSS中的background-image属性来设置背景图片,或者使用img标签来显示缩略图。
3. 检查上传的文件是否正确,确保文件类型和路径是正确的。
如果问题仍然存在,请提供更多的代码和错误信息,以便我们更好地帮助你解决问题。