post 上传文件

最新推荐文章于 2025-10-29 16:26:23 发布

原创最新推荐文章于 2025-10-29 16:26:23 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

这是一个关于Vue.js组件的实现，用于图片上传和预览。组件使用了el-upload元素，支持.jpeg, .png, .jpg格式文件，并在上传前触发before-upload回调。当图片上传成功后，会触发'success'事件并返回mediaId。同时，组件还具有显示默认图片的能力，根据默认Url更新预览图片。

<template>
  <div style="line-height:12px">
    <el-upload
      class="avatar-uploader"
      v-bind='$attrs'
      :action="'/wsj'"
      :before-upload="fileUpload"
      accept=".jpeg,.png,.jpg"
      :show-file-list="false"
      v-loading="loading"
      >
      <!-- :limit="1" :action="'/api' + this.$api.mediaImage" :show-file-list="false" -->
      <img v-if="imageUrl && showImage" :src="imageUrl" class="avatar" style="width: 64px;height:64px"/>
      <!-- <el-button v-else type="primary" :plain="true">点击上传图片</el-button> -->
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
import { strategyUpload } from "@/api/image"
export default {
  props: {
    defaultUrl: {
      default: '',
      type: String
    },
    showImage: {
      default: true,
      type: Boolean
    }
  },
  data () {
    return {
      loading: false,
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token')
      },
      imageUrl: ''
    }
  },
  methods: {
    fileUpload(file) {
      this.loading = true;
      console.log(file, file.url)
      const data = new FormData()
      data.append('image', file);
      strategyUpload(data).then(res => {
        if (res.code == 0) {
          this.imageUrl = res.data.mediaId;
          this.$emit('success', res.data.mediaId)
          this.loading = false
        } else {
          this.loading = false
          this.$message.error('请重试', res.msg)
        }
      })
    },
  },
  mounted () {
  },
  watch: {
    defaultUrl(val) {
      this.imageUrl = val
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
  }
  .avatar {
    width: 64px;
    height: 64px;
    display: block;
  }
</style>