elementUI里面upload组件上传图片时选择图片之后不显示图片的问题,

在upload组件里面上传图片之后 不显示
<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<style></style>
<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

这个问题的原因是因为 upload组件的有一个自动上的属性auto-upload默认值是true,也就是说当用户选择图片之后就会立即上传。这时如果上传地址接口有问题的话就会到时 上传不成功没有办法触发handleAvatarSuccess这个钩子函数。导致没有渲染出图片。

  • 解决

在项目中 一般都是用户点击按钮之后才会进行 往后台数据库插入的操作
所以我们一般会把 auto-upload属性设置成false,通过组件的submit()方法来提交文件
为了解决这个问题 我们就需要在其他的钩子函数里 来触发给渲染图片的区域赋值图片的地址、
我们可以在 on-change这个钩子函数里面来做这个事情 this.imageUrl=URL.createObjectURL(file.raw);

	<el-upload
		  class="avatar-uploader"
		  action="https://jsonplaceholder.typicode.com/posts/"
		  :show-file-list="false"
		  :on-change="handleAvatarChange" //文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
		  :before-upload="beforeAvatarUpload">
		  <img v-if="imageUrl" :src="imageUrl" class="avatar">
		  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
	</el-upload>
	 handleAvatarChange(file,filelist){
	        this.imageUrl=URL.createObjectURL(file.raw);
	 }

然后我们在每次打开弹窗时、清除掉图片的地址就好了 this.imageUrl=“”

  • 可能有更好的解决方法 希望大家多多交流
  • 8
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以回答你的问题。为了在ElementUIUpload中使用七牛云储存图片,你需要进行以下步骤: 1. 首先,你需要在七牛云上创建一个存储空间,并获取到你的Access Key和Secret Key。 2. 然后,在你的Vue项目中安装七牛云的SDK,可以使用npm命令进行安装: ``` npm install qiniu-js --save ``` 3. 在你的Vue组件中,你需要引入ElementUIUpload组件,并添加一个自定义的上传方法。这个方法将会在文件上传被调用: ```javascript <template> <el-upload class="upload-demo" action="/upload" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" :headers="headers" :data="data" :file-list="fileList" multiple> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> <script> import { Upload } from 'element-ui'; import Qiniu from 'qiniu-js'; export default { components: { Upload }, data() { return { fileList: [], token: '', key: '', domain: 'http://xxx.xxx.xxx.xxx/', headers: { 'Authorization': '', 'x-qiniu-url': '' }, data: { token: '', key: '' } }; }, methods: { beforeUpload(file) { // 获取上传凭证 let that = this; return new Promise((resolve, reject) => { axios.get('YOUR_UPLOAD_URL') .then(response => { that.token = response.data.token; that.key = response.data.key; that.headers.Authorization = `UpToken ${that.token}`; that.headers['x-qiniu-url'] = that.domain; that.data.token = that.token; that.data.key = that.key; resolve(); }) .catch(error => { reject(error); }) }); }, handleSuccess(response, file, fileList) { // 上传成功回调 console.log(response); }, handleError(error, file, fileList) { // 上传失败回调 console.log(error); } } } </script> ``` 在这段代码中,我们引入了ElementUIUpload组件和七牛云的SDK,然后在data中定义了一些变量,包括上传凭证、上传文件的key、七牛的域名、请求头和请求参数等。在beforeUpload方法中,我们向你的服务器请求上传凭证,在请求成功后将认证信息和请求参数赋值给data和headers变量。在handleSuccess和handleError方法中,我们可以处理上传成功和上传失败的情况。 4. 最后,你需要在你的服务器端实现上传凭证的生成。可以使用七牛云的SDK,也可以使用其他语言的SDK,例如Java或Python。在服务器端生成上传凭证后,将凭证和上传文件的key返回给前端。 例如,在Node.js中,你可以使用qiniu-sdk: ```javascript const qiniu = require('qiniu'); const accessKey = 'YOUR_ACCESS_KEY'; const secretKey = 'YOUR_SECRET_KEY'; const bucket = 'YOUR_BUCKET_NAME'; const mac = new qiniu.auth.digest.Mac(accessKey, secretKey); const options = { scope: bucket, expires: 7200 }; const putPolicy = new qiniu.rs.PutPolicy(options); const uploadToken = putPolicy.uploadToken(mac); app.get('/uploadToken', (req, res) => { const key = req.query.filename; res.json({ token: uploadToken, key: key }); }); ``` 在这个例子中,我们使用qiniu-sdk生成上传凭证,并在/uploadToken路由中返回凭证和上传文件的key。 这样,你就可以在ElementUIUpload中使用七牛云存储图片了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值