vue中elementUI组件Upload实现手动上传图片

效果图:
手动点击上传图片

  1. 引入Upload组件
	<el-upload
			class="centerImg"
			:class="{hide:hideUploadIcon}"
			:action="' '"//请求地址,手动上传写为空
			list-type="picture-card"
			:on-preview="handlePictureCardPreviewIcon"
			:on-remove="handleRemoveIcon"
			:auto-upload="false"//false,手动上传
			:limit="1"//限制只能上传一张图片
			:on-change="handleAvatarChangeIcon"//文件状态改变时的钩子,
			ref="uploadicon"
			>
		    <i class="el-icon-plus"></i>
  </el-upload>
  <el-button @click="iconDialogVisible = false">取 消</el-button>
  <el-button type="primary" @click="saveIco()" >提 交</el-button>

2.点击上传前,取到图片路径

handleAvatarChangeIcon(file,fileList){
	const isJPG = file.raw.type === 'image/jpeg'
	const isPNG = file.raw.type === 'image/png'
	const isLt2M = file.raw.size / 1024 / 1024 < 0.5
	this.hideUploadIcon = fileList.length >= 1;
	if (!isPNG && !isJPG) {
		this.$message.error('上传图片只能是 JPG/PNG 格式!')
		return false
	} else if (!isLt2M) {
		this.$message.error('上传图片大小不能超过 200kb!')
		return false
	} else if (isLt2M && (isPNG || isJPG)) {
		this.iconformData.img = file.raw;//图片的url
		this.iconformData.name = file.name;//图片的名字
	}
}

3.点击上传,设置headers,传参格式为formdata

saveIco(){
		let config = {
	        timeout: 30000,
	        headers: {
	          "Content-Type": "multipart/form-data",//设置headers
	           token: getToken()
	        }
		};
		const formData = new FormData()
		for (const key in this.iconformData) {
			formData.append(key, this.iconformData[key]);//传参改为formData格式
		}
	    axios
	        .post(
	          SERVER_BASE_URL + "/gateway/dealFile/dealIcoImg",//请求后端的url
	          formData,
	          config
	        )
	        .then(res => {
				if(res.data.rtnCode==200){
					//上传成功
					
					
				}else{
					//上传失败
				}
	        })
	        .catch(error => {
	          //请求失败
	        });
}
  • 6
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,以下是一个手动上传图片Vue 代码,使用了 ElementUIUpload 组件: ```html <template> <div> <el-upload class="upload-demo" action="" :show-file-list="false" :on-change="handleChange" :before-upload="beforeUpload" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> <el-image v-if="imageUrl" :src="imageUrl" style="max-width: 400px; margin-top: 10px;" ></el-image> </div> </template> <script> export default { data() { return { imageUrl: '', // 图片链接 imagePath: '', // 图片文件路径 }; }, methods: { handleChange(file, fileList) { // 选择文件后的处理 this.imagePath = file.raw; this.imageUrl = URL.createObjectURL(file.raw); this.$message.success(`成功上传文件:${file.name}`); }, beforeUpload(file) { // 上传前的验证 const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt500K = file.size / 1024 < 500; if (!isJPG) { this.$message.error('上传图片只能是 JPG/PNG 格式!'); } if (!isLt500K) { this.$message.error('上传图片大小不能超过 500KB!'); } return isJPG && isLt500K; }, }, }; </script> ``` 注意,这里的 `show-file-list` 属性设置为 false,表示不显示上传成功的文件列表。同时,需要在 `handleChange` 方法使用 `URL.createObjectURL` 生成图片链接,以便在页面上显示。如果需要将图片上传到服务器,需要在 `beforeUpload` 方法设置上传接口地址,并在后端实现文件接收和存储功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值