utools插件开发-上传图集-01_米醋屋个人技术博客

utools插件开发-上传图集-01，用这个工具很久了，一直都很方便，前些天突然想我吧自己网站的发布工作集成到utools上不是更方便吗，减少了我打开浏览器输入网址，点击的操作。

说干就干，于是钻研了一下utools官方的api，发现可行。

官方文档：https://www.u-tools.cn/docs/developer/preload.html

1：准备plugin.json
```
{

"main":"index.html",
	"preload": "js/preload.js",
	"logo": "static/images/logo.png",
	"platform": ["win32", "darwin", "linux"],
	"development": {
		"main": "http://localhost:5173/"
	},
	"pluginSetting": {
		"single": true,
		"height": 0
	},
	"features": [{
		"code": "micuer",
		"explain": "自动上传到米醋儿网",
		"icon": "res/xxxx.png",
		"platform": ["win32", "darwin", "linux"],
		"cmds": [
			"micuer",
			"wo",
			{
				"type": "img",
				"label": "图片匹配"
			},
			{
				"type": "files",
				"label": "上传到米醋儿网",
				"fileType": "file",
				"match": ".png,.jpg,.gif,.webp,.jpeg",
				"minLength": 1,
				"maxLength": 99
			},
			{
				"type": "over",
				"label": "无匹配时",
				"exclude": "/xxx/",
				"minLength": 1,
				"maxLength": 500
			},
			{
				"type": "window",
				"label": "窗口动作",
				"match": {
					"app": ["xxx.app", "xxx.exe"],
					"title": "/xxxx/",
					"class": ["xxx"]
				}
			}
		]
	}]
}

```

其中 development.main 是开发者模式。

2：preload.js 部分nodejs 函数封装
```
const fs = require('fs');

window.micuerReadFile = function (str) {
  const data = fs.readFileSync(str);
  return data
}

const res = [];
utools.onPluginEnter(({code, type, payload}) => {
  console.log('用户进入插件应用', code, type, payload)
  res['code'] = code;
  res['type'] = type;
  res['payload'] = payload;
})
window.enterType = res
```

preload.js 是一个特殊且单独的文件，不需要与其他业务代码编译在一起，在此文件中可以访问 nodejs、electron、uTools 提供的 api，并挂载到 window 对象中，你其他的普通 javascript 代码就可以访问这些 api。

我这里暴露了2个window方法。

3：主上传程序

```
<template>
	<view class="content">
		<view>
			<view class="uni-textarea">
				<textarea class="textarea" v-model="info" placeholder="图集的标题" focus="true" @blur="bindTextAreaBlur"
					auto-height />
			</view>
		</view>
		
		
		
		<view class="image-list"  v-show="imgBase64">
			<view class="image-item" v-for="(item,index) in imgBase64" :key="index">
				<view class="image-content">
					<image mode="center"
					:src="'data:image/jpg;base64,' + item"></image>
				</view>
			</view>
		</view>

<view class="uni-padding-wrap uni-common-mt">
			<button class="add" :loading="load" @click="uploadImg()">上传</button>
		</view>
	</view>
</template>
<script>
	// https://ext.dcloud.net.cn/plugin?id=326 组件地址

export default {

data() {
			return {
				imageData: [], // utools api 读取的文件
				imgBase64:[], // fs 转换后的文件
				status:false, //图片是否已上传
				serverUrl: this.api_url+'/Upload/upload_xcx',
				info: '',
				load: false,
				status: "off",
				header:{
					token:uni.getStorageSync("token")
				}
			}
		},
		components: {
			
		},
		mounted() {
			let imgs =  utools.getCopyedFiles()	
			
			let _this = this
			
			if(imgs){
				imgs.forEach(function(item,index){
					var data = window.micuerReadFile(item.path)				
					let imageDataToBase64 = data.toString('base64')
					_this.imgBase64.push( imageDataToBase64 )	
					
				})
			}
					
			
			
		},
		methods: {

bindTextAreaBlur: function(e) {
				console.log(e.detail.value)
			},
			radioChange: function(evt) {
				console.log(evt.detail.value)
				this.status = evt.detail.value
			},
			uploadImg(){
				let _this = this;
				
				if(_this.status != true){
					this.imgBase64.forEach(function(item){
						uni.request({
							url: _this.api_url+"/Upload/paste_up",
							header:_this.header,
							data: {
								"name":"2.jpg",
								"base":item
							},
							method: "POST",
							success(e) {
								console.log(e);
						
								uni.showToast({
									title: e.data.msg,
									duration: 2000
								});
								
								_this.imageData.push(e.data.url)
					
							},
							fail() {
						
							}
						})
					})
					
				}
				
				_this.status = true;
				
				_this.subMsg()
				
			},
			subMsg: function() {
				this.load = true
				let that = this
				let data = {
					info: that.info,
					imgs: that.imageData,
					status: that.status,
					token: uni.getStorageSync("token")
				}
				console.log(data)

uni.request({
					url: that.api_url+"/api_index/tuji",
					data: data,
					method: "POST",
					success(e) {
						uni.showToast({
							title: e.data.msg,
							duration: 2000
						});
						
					},
					fail() {

}
				})
			}
		}
	}
</script>
<style scoped>
	.textarea {
		border: solid 1px #EEEEEE;
		margin: 0 10rpx;
		width: 98%;
		padding: 25rpx 1%;
	}

.add {
		width: 96%;
		background: #ec706b;
		color: #FFF;
	}

.radio {
		width: 96%;
		padding: 15upx 2% 5% 2%;

}
	
	.image-list{
		display: -webkit-flex; /* Safari */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.image-list image{
		padding: 15rpx;
	}
</style>

```

至此，基本上完成了操作，当然教程里面写的比较简陋，下面给大家看看预览图吧。

![](https://cos.micuu.com/web/markdown/63a0102f7308a.png)

![](https://cos.micuu.com/web/markdown/63a0104253f50.png)

![](https://cos.micuu.com/web/markdown/63a0104e5a1e6.png)

注:原创不易,转载请注明出处( https://micuu.com/new/3157.html?special=3160 )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

utools插件开发-上传图集-01

留言反馈