weixin_38838750
企鹅YU
采纳率50%
2018-08-02 14:42 阅读 9.4k

使用Element的上传图片组件和Vue实现上传图片功能,在线等,急急急!!!

80

难点:
一、action必选参数,为上传的地址?
二、上传的地址怎么链接后台数据接口?
三、是选择图片点击打开就上传到后台数据库里,还是选择图片后打开显示在页面上,然后使用保存按钮统一把数据保存到数据库里?
疑点:
:action="uplodaerUrl,
UploadUrl:function(){
return "返回需要上传的地址";

}

网上说action加绑定方法,返回链接地址,但是没成功案例,请大神指点!

![![![![图片说明](https://img-ask.csdn.net/upload/201808/02/1533220803_59376.png)图片说明](https://img-ask.csdn.net/upload/201808/02/1533220793_255029.png)图片说明](https://img-ask.csdn.net/upload/201808/02/1533220785_75921.png)图片说明](https://img-ask.csdn.net/upload/201808/02/1533220771_945217.png)图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

6条回答 默认 最新

  • zqbnqsdsmd zqbnqsdsmd 2018-08-02 16:04
  • qq_40917843 土豆君 2018-08-03 08:17
     <el-upload
              class="avatar-uploader"
              v-loading="loading"
              :show-file-list="false"
              multiple: false
              action="http://接口地址/api/common/uploadFile"
              :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-progress :percentage="progressData" v-show="loading"></el-progress>-->
            </el-upload>
    
    
    handleAvatarSuccess(res, file) {
                this.loading = false
          this.imageUrl = res.data.url
          this.picName = res.data.name
          Message({
                    type: 'success',
            message: '上传成功',
            showClose: true
            })
          },
    
    
    beforeAvatarUpload(file) {
            this.loading = true
            this.progressData = 0
            var timer2 = setInterval(() => {
              this.progressData = this.progressData + 1
              if (this.progressData >= 100) {
                clearInterval(timer2)
              }
            }, 200)
            // const isJPG = file.type === 'image/jpeg'
            const isLt5M = file.size / 1024 / 1024 < 5
            // if (!isJPG) {
            //   Message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt5M) {
              Message({
                        type: 'warning',
              message: '上传头像图片大小不能超过 5MB!',
              showClose: true
                })
            }
            return isLt5M
          },
    
    
    点赞 1 评论 复制链接分享
  • qq_40917843 土豆君 2018-08-03 06:14

    后台给上传的接口, 通过接口的url上传后, 后台会返回图片在服务器的url和name

    点赞 评论 复制链接分享
  • qq_40917843 土豆君 2018-08-03 06:18

    图片说明

    点赞 评论 复制链接分享
  • qq_36546117 mr&fine 2018-08-03 06:29
    点赞 评论 复制链接分享
  • weixin_38838750 企鹅YU 2018-08-03 08:37

    谢谢整理代码!
    主要问题是action,我没有直接的传送地址比如http什么的,我是要通过后台接口传送代码???
    我该怎么样把后台接口放到action里?

    点赞 评论 复制链接分享

相关推荐