前端日常-VUE-上传组件篇

忙31690

已于 2024-12-05 14:17:35 修改

阅读量33

点赞数

分类专栏： vue 文章标签：笔记

于 2024-09-18 14:22:46 首次发布

本文链接：https://blog.csdn.net/weixin_72831153/article/details/135504320

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

1、上传图片时剪裁图片功能

安装 npm install vue-ele-upload-image --save

<ele-upload-image
 ref="uploadimage"
 :responseFn="handleResponse"
 :headers="headers"
 :action="imageUrls"
 :cropWidth="500"
 :cropHeight="300"
 :accept="'.jpg,.jpeg,.png'"
 fileType="[.jpg,.jpeg,.png']"
 :fileType="['png', 'jpg', 'jpeg']"
 v-model="news.courseImage"
 crop :data="{ bucketName: 'cmVsZWFzZS0xeWQ=' }"
 >
</ele-upload-image>
<script>
import EleUploadImage from 'vue-ele-upload-image'
export default {
  components: { VueEditor, EleUploadImage },
  data() {
    return {
        news: {
            courseImage: '',
          },
        headers: {
            Authorization: 'Bearer ' + getToken()
          },
        imageUrls: process.env.NMG_API + '/dfs/qiniu/upload',
    }
  },
  methods: {
    handleResponse (response, file, fileList) {
      return response.data.imageUrl
    },
}
</script>