前端上传图片

最新推荐文章于 2024-11-03 16:40:52 发布

yuyu_2019

最新推荐文章于 2024-11-03 16:40:52 发布

阅读量136

点赞数

分类专栏： Element 文章标签：前端

本文链接：https://blog.csdn.net/yuyu_2019/article/details/134199459

版权

Element 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

headers要改为form-data

headers: {
 'Content-Type': 'multipart/form-data',
},

<template>
  <div>

    <el-upload action="#"
               list-type="picture-card"
               :auto-upload="false"
               :on-change="handleAvatarSuccess">
      <i slot="default"
         class="el-icon-plus"></i>
      <div slot="file"
           slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail"
             :src="file.url"
             alt="">
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)">
            <i class="el-icon-download"></i>
          </span>
          <span v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%"
           :src="dialogImageUrl"
           alt="">
    </el-dialog>

    <button @click="uploadPicture">上传图片</button>

  </div>

</template>

<script>




import { materialPictureUpload, materialPictureGetlist } from '@/api/goods/goods' // 获取接口
export default {
  name: 'testabc',

  components: {

  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      file: null
    };
  },
  methods: {

    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      console.log(file)
      this.dialogImageUrl = file.url;

      this.dialogVisible = true;
    },
    handleDownload(file) {

    },

    handleAvatarSuccess(file, fileList) {
      console.log(file);
      this.file = file.raw
      console.log(this.file);

      let obj = {
        id: '1',
        creator: 'material',
        uploadtime: '2023-10-30 14:00:00',
        filename: 'logo.jpg',
        type: 'material',
      }
      const formData = new FormData()
      formData.append('jsondata', JSON.stringify(obj))
      formData.append('file', this.file)

      console.log(formData)

    },

    // 点击上传图片
    uploadPicture() {
      materialPictureUpload(formData).then(res => {
        console.log(res)
      })
    }


  },
  mounted() {

    let obj = {

    }
    materialPictureGetlist(obj).then(res => {
      console.log(res)
    })

  }
}
</script>