el-upload 上传图片

最新推荐文章于 2024-08-15 15:35:32 发布

原创最新推荐文章于 2024-08-15 15:35:32 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #http #vue.js

vue 专栏收录该内容

16 篇文章

订阅专栏

这段博客展示了如何在Vue项目中实现图片上传功能。通过`el-upload`组件，限制了只能选择1个jpg或png文件，且不超过500kb。文件上传成功后会更新图片URL，并提供了预览、移除图片的功能。上传过程包括设置上传地址、监听文件上传成功、移除文件等操作。

            <el-upload
              class="upload-demo"
              ref="upload"
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handle_success"
              :action="upUrl"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

data:
        fileList: [],
        upUrl:"",

js:
      /*上传图片*/
      getUpUrl(){
        var url = this.HOST + '/upload/userUploadImg'
        this.upUrl=url
        console.log(this.upUrl)
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      handle_success(res) {
        if (res.state=="success"){
          this.$message.success('图片上传成功')
          this.tutorialsLesson.vedioCoverImg=res.url
        }
      }