vue-image-crop-upload的使用

々々

已于 2023-06-15 09:06:48 修改

阅读量607

点赞数

文章标签： vue.js 前端 javascript

于 2023-06-14 16:18:11 首次发布

本文链接：https://blog.csdn.net/weixin_42203451/article/details/131200601

版权

1.安装代码

npm install babel-polyfill --save
npm install vue-image-crop-upload --save
// 如果有ts环境
npm install @vue/runtime-core --save-dev

2.vue页面导入使用

import 'babel-polyfill'; // es6 shim
import myUpload from "vue-image-crop-upload";
import OSS from 'ali-oss';
import aliossConfig from '@/common/alioss.config';
import uploadFile from '@/common/alioss.file.upload'
import { ElMessage } from 'element-plus';

3.template 使用组件

开关是v-model="imagecropperShow"

<template>
  <a class="btn" @click="toggleShow">set avatar</a>
  <my-upload field="test.png" v-model="imagecropperShow" @crop-success="onCropSuccess" @srcFileSet="srcFileSet"
    @crop-upload-success="cropUploadSuccess" @crop-upload-fail="cropUploadFail" :withCredentials="true" :width="500"
    :height="500" url="" :params="params" :headers="headers" img-format="png" ref="refMyUpload">
  </my-upload>
  <img :src="imgDataUrl1">
</template>

4.打开方法

    const imagecropperShow = ref(false);
    const toggleShow = () => {
      // imagecropperShow.value = true
      imagecropperShow.value = !imagecropperShow.value;
    }

5.上传文件到OSS

    // OSS 配置-------------
    const client = new OSS({
      region: aliossConfig.region,
      accessKeyId: aliossConfig.accessKeyId,
      accessKeySecret: aliossConfig.accessKeySecret,
      bucket: aliossConfig.bucket,
    });
    // OSS 配置-------------

// 中转参数
    const fileName1 = ref();
    const fileType1 = ref();
    /**
     * srcFileSet 用户选取文件之后事件
     */
    const srcFileSet = (fileName, fileType) => {
      fileName1.value = fileName;
      fileType1.value = fileType;
    }
    // 最后的光芒
    const onCropSuccess = async (imageDataUrl) => {
      // imgDataUrl1.value = imageDataUrl;
      console.log(imageDataUrl);
      const blob = await fetch(imageDataUrl).then((r) => r.blob());
      const fileName = fileName1.value;
      const filePath = `truckDelivery/test/${fileName}`
      try {
        const { url } = await client.put(filePath, blob);
        console.log(url);
        if(url.concat('/')) {
          ElMessage.success('成功啦啦啦(*^_^*)~~');
          imgDataUrl1.value = url;
          console.log('onCropSuccess->', imgDataUrl1.value);
        }
      } catch (e) {
        ElMessage.error('不不不要啊/(ㄒoㄒ)/~~');
        console.log(e);
      }
    }

6.中文文档--官方ReadMe

# vue-image-crop-upload

vue图片剪裁上传组件

**Notice**: (该组件适用于pc端，不推荐手机端使用)

[![GitHub issues](https://img.shields.io/github/issues/dai-siki/vue-image-crop-upload.svg)](https://github.com/dai-siki/vue-image-crop-upload/issues)
[![GitHub forks](https://img.shields.io/github/forks/dai-siki/vue-image-crop-upload.svg)](https://github.com/dai-siki/vue-image-crop-upload/network)
[![GitHub stars](https://img.shields.io/github/stars/dai-siki/vue-image-crop-upload.svg)](https://github.com/dai-siki/vue-image-crop-upload/stargazers)
[![Twitter](https://img.shields.io/twitter/url/https/github.com/dai-siki/vue-image-crop-upload.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=%5Bobject%20Object%5D)

[![NPM](https://nodei.co/npm/vue-image-crop-upload.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-image-crop-upload/)

## 更新日志
#### @3.0.0
- 兼容vue3

## 示例
[点我](http://dai-siki.github.io/vue-image-crop-upload/example-3/demo.html).

## 截图
![screenshot](screenshot/2.png)

## 浏览器兼容
IE10+

## 安装
#### npm
```shell
$ npm install vue-image-crop-upload
```


## 使用
#### Props
| 名称              | 类型               | 默认             | 说明                                         |
| ----------------| ---------------- | ---------------| ------------------------------------------|
| url             | String            |  ''                | 上传接口地址，如果为空，图片不会上传    |
| method				| String		| 'POST'               | 上传方法 |
| field       | String   | 'upload'     | 向服务器上传的文件名    |
| value             | Boolean            | twoWay            | 是否显示控件，双向绑定    |
| params             | Object            |  null                | 上传附带其他数据，格式"{k:v}"    |
| headers             | Object            |  null                | 上传header设置，格式"{k:v}"    |
| langType             | String            | 'zh'                 | 语言类型，默认中文    |
| langExt             | Object            |                   | 语言包自行扩展    |
| width             | Number            |   200                | 最终得到的图片宽度     |
| height             | Number            |  200                 | 最终得到的图片高度   |
| imgFormat             | string            | 'png'                  | jpg/png, 最终得到的图片格式    |
| imgBgc             | string            | '#fff'                  | 导出图片背景色,当imgFormat属性为jpg时生效   |
| noCircle            | Boolean              | false             | 关闭 圆形图像预览 |
| noSquare            | Boolean              | false             | 关闭 方形图像预览 |
| noRotate            | Boolean              | true             | 关闭 旋转图像功能 |
| withCredentials          | Boolean             | false         | 支持跨域 |

#### Events
| 名称              | 说明                                         |
| ----------------| ------------------------------------------|
| srcFileSet   |用户选取文件之后, 参数( fileName, fileType, fileSize )     |
| cropSuccess   | 图片截取完成事件（上传前), 参数( imageDataUrl, field )     |
| cropUploadSuccess | 上传成功， 参数( jsonData, field )    |
| cropUploadFail    | 上传失败， 参数( status, field )    |

#### langExt示例
```js
{
    hint: '点击，或拖动图片至此处',
    loading: '正在上传……',
    noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
    success: '上传成功',
    fail: '图片上传失败',
    preview: '头像预览',
    btn: {
        off: '取消',
        close: '关闭',
        back: '上一步',
        save: '保存'
    },
    error: {
        onlyImg: '仅限图片格式',
        outOfSize: '单文件大小不能超过 ',
        lowestPx: '图片最低像素为（宽*高）：'
    }
}
```

#### 使用示例 vue@1
```html
<div id="app">
	<a class="btn" @click="toggleShow">设置头像</a>
	<my-upload field="img"
		:width="300"
		:height="300"
		url="/upload"
		:params="params"
		:headers="headers"
		:value.sync="show"
		img-format="png"></my-upload>
	<img :src="imgDataUrl">
</div>

<script>
	import 'babel-polyfill'; // es6 shim
	import Vue from 'vue';
	import myUpload from 'vue-image-crop-upload/upload-1.vue';

	new Vue({
		el: '#app',
		data: {
			show: true,
			params: {
				token: '123456798',
				name: 'avatar'
			},
			headers: {
				smail: '*_~'
			},
			imgDataUrl: '' // the datebase64 url of created image
		},
		components: {
			'my-upload': myUpload
		},
		methods: {
			toggleShow() {
				this.show = !this.show;
			}
		},
		events: {
            /**
			 * crop success
			 *
			 * [param] imgDataUrl
			 * [param] field
			 */
			cropSuccess(imgDataUrl, field){
				console.log('-------- crop success --------');
				this.imgDataUrl = imgDataUrl;
			},
			/**
			 * upload success
			 *
			 * [param] jsonData   服务器返回数据，已进行json转码
			 * [param] field
			 */
			cropUploadSuccess(jsonData, field){
				console.log('-------- upload success --------');
				console.log(jsonData);
				console.log('field: ' + field);
			},
			/**
			 * upload fail
			 *
			 * [param] status    server api return error status, like 500
			 * [param] field
			 */
			cropUploadFail(status, field){
				console.log('-------- upload fail --------');
				console.log(status);
				console.log('field: ' + field);
			}
		}
	});

</script>
```

#### 使用示例 vue@2
```html
<div id="app">
	<a class="btn" @click="toggleShow">设置头像</a>
	<my-upload field="img"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
        v-model="show"
		:width="300"
		:height="300"
		url="/upload"
		:params="params"
		:headers="headers"
		img-format="png"></my-upload>
	<img :src="imgDataUrl">
</div>

<script>
	import 'babel-polyfill'; // es6 shim
	import Vue from 'vue';
	import myUpload from 'vue-image-crop-upload/upload-2.vue';

	new Vue({
		el: '#app',
		data: {
			show: true,
			params: {
				token: '123456798',
				name: 'avatar'
			},
			headers: {
				smail: '*_~'
			},
			imgDataUrl: '' // the datebase64 url of created image
		},
		components: {
			'my-upload': myUpload
		},
		methods: {
			toggleShow() {
				this.show = !this.show;
			},
            /**
			 * crop success
			 *
			 * [param] imgDataUrl
			 * [param] field
			 */
			cropSuccess(imgDataUrl, field){
				console.log('-------- crop success --------');
				this.imgDataUrl = imgDataUrl;
			},
			/**
			 * upload success
			 *
			 * [param] jsonData   服务器返回数据，已进行json转码
			 * [param] field
			 */
			cropUploadSuccess(jsonData, field){
				console.log('-------- upload success --------');
				console.log(jsonData);
				console.log('field: ' + field);
			},
			/**
			 * upload fail
			 *
			 * [param] status    server api return error status, like 500
			 * [param] field
			 */
			cropUploadFail(status, field){
				console.log('-------- upload fail --------');
				console.log(status);
				console.log('field: ' + field);
			}
		}
	});

</script>
```

#### 使用示例 vue@3
```html
<div id="app">
	<a class="btn" @click="toggleShow">设置头像</a>
	<my-upload field="img"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
        v-model="show"
		:width="300"
		:height="300"
		url="/upload"
		:params="params"
		:headers="headers"
		img-format="png"></my-upload>
	<img :src="imgDataUrl">
</div>

<script>
	import 'babel-polyfill'; // es6 shim
	import Vue from 'vue';
	import myUpload from 'vue-image-crop-upload';

	new Vue({
		el: '#app',
		data: {
			show: true,
			params: {
				token: '123456798',
				name: 'avatar'
			},
			headers: {
				smail: '*_~'
			},
			imgDataUrl: '' // the datebase64 url of created image
		},
		components: {
			'my-upload': myUpload
		},
		methods: {
			toggleShow() {
				this.show = !this.show;
			},
            /**
			 * crop success
			 *
			 * [param] imgDataUrl
			 * [param] field
			 */
			cropSuccess(imgDataUrl, field){
				console.log('-------- crop success --------');
				this.imgDataUrl = imgDataUrl;
			},
			/**
			 * upload success
			 *
			 * [param] jsonData   服务器返回数据，已进行json转码
			 * [param] field
			 */
			cropUploadSuccess(jsonData, field){
				console.log('-------- upload success --------');
				console.log(jsonData);
				console.log('field: ' + field);
			},
			/**
			 * upload fail
			 *
			 * [param] status    server api return error status, like 500
			 * [param] field
			 */
			cropUploadFail(status, field){
				console.log('-------- upload fail --------');
				console.log(status);
				console.log('field: ' + field);
			}
		}
	});

</script>
```