UpLoadForm

本文介绍了一个使用Struts框架实现文件上传的例子。通过展示upload.jsp页面代码和UpLoadAction.java处理逻辑,详细说明了如何配置表单以支持多部分数据格式、如何获取上传文件并将其保存到指定路径。

upload.jsp

<html:form action="/upLoad" method="post"enctype="multipart/form-data">
			fileName : <html:text property="fileName" />
		
			<br />
			fileContent : <html:file property="fileContent" />
		
			<br />
			<html:submit />
			
		</html:form>

 

UpLoadAction.java

public ActionForward execute(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		UpLoadForm upLoadForm = (UpLoadForm) form;// TODO Auto-generated
		// method stub
		FormFile ff = upLoadForm.getFileContent();
		String filename=ff.getFileName();
		System.out.println(ff.getFileName() + ff.getContentType());
		System.out.println(getServlet().getServletContext().getRealPath("/"));
		  try {
			OutputStream outputStream = new FileOutputStream(new File("c://" + ff.getFileName()));
			  byte b[]=ff.getFileData();
			  outputStream.write(b);
			  outputStream.close();
		} catch (FileNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

 

 

下面的代码上传图片列表,将图片一行展示三个:<template> <div class="container"> <el-tabs type="border-card"> <el-tab-pane :label="title"> <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <uploadForm label="介绍图片:" v-model="form.cover" name="cover" :rules="rules.cover" :disabled="Boolean(queryParams.type)" :limit="1"></uploadForm> <el-row> <el-col :span="12"> <el-form-item label="团购名称:" prop="name"> <el-input class="input" v-model="form.name" :disabled="Boolean(queryParams.type)" placeholder="请输入团购名称" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="自动截止:" prop="isAutoEnd"> <el-switch v-model="form.isAutoEnd" :disabled="Boolean(queryParams.type)" :active-value="true" :inactive-value="false" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="开始时间:" prop="startTime"> <el-date-picker clearable v-model="form.startTime" type="datetime" default-time="12:00:00" :disabled="Boolean(queryParams.type)" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择活动开始时间"> </el-date-picker> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="截止时间:" prop="endTime"> <el-date-picker clearable v-model="form.endTime" type="datetime" default-time="12:00:00" value-format="yyyy-MM-dd HH:mm:ss" :disabled="Boolean(queryParams.type)" placeholder="请选择活动截止时间"> </el-date-picker> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="最大接龙人数" prop="maxJoinNum"> <el-input-number :disabled="Boolean(queryParams.type)" v-model="form.maxJoinNum" :precision="0" :step="1" :min="0"></el-input-number> </el-form-item> </el-col> <!-- <el-col :span="12"> <el-form-item label="最小成交金额" prop="minAmount"> <el-input-number :disabled="Boolean(queryParams.type)" v-model="form.minAmount" :precision="2" :step="0.1" :min="0"></el-input-number> </el-form-item> </el-col> --> <el-col :span="12"> <el-form-item label="提货地址:" prop="addressIds"> <el-select :disabled="Boolean(queryParams.type)" v-model="form.addressIds" filterable placeholder="请选择" multiple> <el-option v-for="item in addressoptions" :key="item.id" :label="item.addressName" :value="item.id"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="团购内容" prop="detailInfo"> <UEditor v-model="form.detailInfo" ref="ueditor" :config="myConfig" :disabled="Boolean(queryParams.type)" /> </el-form-item> <!-- <el-form-item label="团购内容:" prop="detailInfo"> <el-input :disabled="Boolean(queryParams.type)" type="textarea" :rows="2" placeholder="请输入团购内容" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.detailInfo"></el-input> </el-form-item> --> </el-col> </el-row> <el-form-item label="其它信息:"> <el-checkbox-group v-model="form.selectedItemsOther" :disabled="Boolean(queryParams.type)"> <el-checkbox label="isGetRealName">真实姓名</el-checkbox> <el-checkbox label="isGetPhone">手机号码</el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="功能选择:"> <el-checkbox-group v-model="form.selectedItemsFunction" :disabled="Boolean(queryParams.type)"> <el-checkbox label="isHideList">发布最新接龙列表</el-checkbox> <el-checkbox label="isHideOrderAmount">接龙金额仅创建人可见</el-checkbox> <el-checkbox label="canCancel">禁止用户取消订单</el-checkbox> </el-checkbox-group> </el-form-item> <div> <el-form-item label="商品信息:" prop="products"> <el-table :data="form.products"> <el-table-column label="商品名称" align="center"> <template slot-scope="{row,$index}"> <div style="padding-bottom: 15px;"> <el-form-item :prop="`products.${$index}.name`" :rules="[{ required: true, message: '请输入团购名称', trigger: ['change', 'blur'] }]"> <el-input :disabled="Boolean(queryParams.type)" v-model="form.products[$index].name" placeholder="请输入团购名称"></el-input> </el-form-item> </div> </template> </el-table-column> <el-table-column label="商品价格" align="center"> <template slot-scope="{row,$index}"> <div style="padding-bottom: 15px;"> <el-form-item :prop="`products.${$index}.price`" :rules="[{ required: true, message: '请输入商品价格', trigger: ['change', 'blur'] }]"> <el-input-number :precision="2" :step="0.1" :min="0" :disabled="Boolean(queryParams.type)" v-model="form.products[$index].price"></el-input-number> </el-form-item> </div> </template> </el-table-column> <el-table-column label="商品数量" align="center"> <template slot-scope="{row,$index}"> <div style="padding-bottom: 15px;"> <el-form-item :prop="`products.${$index}.totalNum`" :rules="[{ required: true, message: '请输入商品数量', trigger: ['change', 'blur'] }]"> <el-input-number :precision="0" :step="1" :min="1" :disabled="Boolean(queryParams.type)" v-model="form.products[$index].totalNum"></el-input-number> </el-form-item> </div> </template> </el-table-column> <el-table-column label="每单限制购买量" align="center"> <template slot-scope="{row,$index}"> <div style="padding-bottom: 15px;"> <el-form-item :prop="`products.${$index}.limitNum`" :rules="[{ required: true, message: '请输入每单限制购买量', trigger: ['change', 'blur'] }]"> <el-input-number :precision="0" :step="1" :min="1" :disabled="Boolean(queryParams.type)" v-model="form.products[$index].limitNum"></el-input-number> </el-form-item> </div> </template> </el-table-column> <el-table-column label="商品图片" align="center"> <template slot-scope="{row,$index}"> <div style="padding-bottom: 15px; "> <el-upload action :file-list="row.image" :prop="`products.${$index}.image`" :on-remove="(file, fileList) => handleRemoveMaterial(file, fileList, $index)" :http-request="(obj) => selectPicUploadMaterial(obj, $index)" list-type="picture-card" :disabled="Boolean(queryParams.type)" v-model="form.products[$index].image"> <i class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </template> </el-table-column> <el-table-column label="商品信息详情" align="center"> <template slot-scope="{row,$index}"> <div style="padding-bottom: 15px;"> <!-- <el-form-item :prop="`products.${$index}.productDetailInfo`" :rules="[{ required: true, message: '请输入商品信息详情', trigger: ['change', 'blur'] }]"> <UEditor v-model="form.products[$index].productDetailInfo" ref="ueditor" :config="myConfig1" :disabled="Boolean(queryParams.type)" /> </el-form-item> --> <el-form-item prop="`products.${$index}.detail`"> <el-input :disabled="Boolean(queryParams.type)" type="textarea" :rows="2" placeholder="请输入商品信息详情" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.products[$index].detail"></el-input> </el-form-item> </div> </template> </el-table-column> <!-- <el-table-column label="商品图片" align="center"> <template slot-scope="{row,$index}"> <div style="padding-bottom: 15px;"> <uploadForm label="" v-model="form.products[$index].image" :name="`products.${$index}.image`" :rules="[ { required: true, message: '请选择商品图片', trigger: ['change', 'blur'] } ]" :disabled="Boolean(queryParams.type)" :limit="3"></uploadForm> </div> </template> </el-table-column> --> <el-table-column v-if="!queryParams.type" label="操作" align="center" class-name="small-padding fixed-width" width="180"> <template slot-scope="scope"> <el-button @click="addproduct()"> 添加</el-button> <el-button type="danger" icon="el-icon-delete" :disabled="form.products.length <= 1" @click="removeRow(scope.$index)">删除</el-button> </template> </el-table-column> </el-table> </el-form-item> </div> </el-form> <!-- 修改/新增 --> <div class="dialog-footer"> <el-button v-if="!queryParams.type" type="primary" @click="submitForm">确 定</el-button> <el-button @click="handleBack">取 消</el-button> </div> </el-tab-pane> </el-tabs> </div> </template> <script> import { imgUrl } from '@/utils/request' import uploadForm from "@/components/uploadForm/index2.vue"; import { getISOTime, checkLongitudeValidator, checkPointIsNumber } from '@/utils/parsing' import { checkPhone } from '@/utils/validate' import mapView from '@/components/MapContainer/index.vue' import UEditor from '@/components/UEditor/ue' import { addGroupShop, editGroupBuy, getGroupBuyAddressPage, getGroupBuyDetail } from '@/api/solitaire/solitaire' import { uploadPic } from '@/api/activity/activity' import { onMounted, beforeDestroy } from 'vue' import { reset } from 'echarts/lib/visual/seriesColor' export default { components: { UEditor, mapView, uploadForm, }, onMounted() { }, data() { return { myConfig1:{}, fileList: [], myConfig:{}, addressoptions: [], addressList: [], currentTime: new Date().toLocaleTimeString(), timer: null, // 第一个复选框组绑定值 // 第二个复选框组绑定值 selectedItemsFunction: [], checkList: ['选中且禁用', '复选框 A'], checked: true, // 单个复选框的绑定 dataList: [], title: "新增接龙", // 封面图片 selectImgUrl: '', queryParams: {}, currentImgIndex: 0, // 封面图片类型选择 imgDialogVisible: false, // 表单数据 form: { selectedItemsOther: [], selectedItemsFunction: [], addressIds: [], canCancel: 0, cover: [], detailInfo: null, endTime: null, id: 0, isAutoEnd: 0, isHideList: false, isHideOrderAmount: false, isJoin: 0, maxJoinNum: null, minAmount: null, name: "", products: [ { detail: null, id: 0, image: [], limitNum: 0, name: "", parentId: 0, price: 0, soldNum: 0, totalNum: 0, } ], realEndTime: "", startTime: "", status: 0, }, // 表单校验 rules: { addressIds: [ { required: true, message: '请选择提货地址', trigger: ['change', 'blur'] } ], cover: [ { required: true, message: '请选择介绍图片', trigger: ['change', 'blur'] } ], name: [ { required: true, message: '请输入团购名称', trigger: 'change' } ], othermessage: [ { type: 'array', required: true, message: '请选择其它信息', trigger: 'change' } ], selectability: [ { type: 'array', required: true, message: '请选择功能', trigger: 'change' }, ], shopmessage: [ { required: true, message: '请输入商品信息', trigger: 'change' }, ], detailInfo: [ { required: true, message: '请输入团购内容', trigger: ['change', 'blur'] } ], maxJoinNum: [ { required: true, message: '请输入最大接龙人数', trigger: 'change' }, ], minAmount: [ { required: true, message: '最小成交金额不能为空', trigger: 'change' } ], endTime: [ { required: true, message: '结束时间必须选择', trigger: 'change' } ], startTime: [ { required: true, message: '开始时间不能为空', trigger: 'change' } ], description: [ { required: true, message: '活动开始内容不能为空', trigger: 'change' } ], address: [ { required: true, message: '地点不能为空', trigger: 'change' } ], conditionRequire: [ { required: true, message: '请输入条件说明', trigger: 'change' } ], // signStartDatetime: [ // { required: true, message: '报名开始时间必须选择', trigger: 'change' } // ], signEndDatetime: [ { required: true, message: '活动截止时间必须选择', trigger: 'change' } ], jobUserVOLists: [ { type: 'array', required: true, message: '请添加岗位需求', trigger: 'change' } ], }, // 图片前缀 cover: imgUrl, // //分页 column: { pageSize: null, pageNum: null }, // 队伍列表 // 岗位表单校验 jobRules: { jobName: [ { required: true, message: '请输入岗位名称', trigger: 'change' } ], jobCount: [ { required: true, message: '请输入岗位人数', trigger: 'change' } ], workHour: [ { required: true, message: '请输入工时', trigger: 'change' } ], pointPercent: [ { required: true, message: '请输入积分(每人每小时)', trigger: 'change' }, { validator: checkPointIsNumber, message: '积分必须为数字' } ], checkInTime: [ { required: true, message: '请输入签到时间', trigger: 'change' } ], checkOutTime: [ { required: true, message: '请输入签退时间', trigger: 'change' } ], checkLocation: [ { required: true, message: '请选择签到地点', trigger: 'change' } ] }, } }, created() { this.getAddressList() this.queryParams = this.$route.query; if (this.queryParams.id) { // 编辑 this.title = '修改接龙' console.log(Boolean(this.queryParams.type),'59') // this.isdisabled = true; getGroupBuyDetail(this.queryParams.id).then(res => { this.form = { ...res, cover: [{ url: res.cover }], isAutoEnd: res.isAutoEnd === 1 ? true : false, addressIds: res.addresses.map(n => (n.id)), selectedItemsOther: [], selectedItemsFunction: [], products: res.products.map((n) => { let imageArray = [] if (n.image) { const imageUrls = n.image.split(','); imageArray = imageUrls.map(url => ({ url })); } console.log(imageArray,'988') return { ...n, image: imageArray } // const imageUrls = n.image.split(','); // return { // ...n, // image: imageUrls.map(url => ({ url })) // } }) } console.log(this.form.isAutoEnd,'0000') if (res.isGetRealName === 1) { this.form.selectedItemsOther.push('isGetRealName') } if (res.isGetPhone === 1) { this.form.selectedItemsOther.push('isGetPhone') } if (res.isHideList ===0) { this.form.selectedItemsFunction.push('isHideList') } if (res.isHideOrderAmount === 1) { this.form.selectedItemsFunction.push('isHideOrderAmount') } if (res.canCancel === 1) { this.form.selectedItemsFunction.push('canCancel') } this.$nextTick(() => { if (this.$refs.ueditor) { this.$refs.ueditor.setContent(res.detailInfo); } }); console.log(this.form,'-----') }) } }, methods: { handleRemoveMaterial(file, fileList, index) { // 找到要删除的图片在商品图片数组中的索引 const fileIndex = this.form.products[index].image.findIndex(item => item.url === file.url); if (fileIndex > -1) { // 从商品图片数组中移除该图片 this.form.products[index].image.splice(fileIndex, 1); } // 更新 fileList const newFileList = fileList.filter(item => item.url !== file.url); this.form.products[index].image = newFileList; }, selectPicUploadMaterial(obj, index) { let fd = new FormData(); fd.append('file', obj.file); uploadPic(fd, { modularName: 'ACTIVITY' }).then(res => { console.log('上传图片返回的数据',res); if (res ) { const product = this.form.products[index]; if (!product.image) { product.image = []; } product.image.push({ url: res, uid: Date.now() }); } else { console.error('上传图片失败,未获取到有效的 url', res); } }).catch(error => { console.error('上传图片请求失败', error); }); }, onMounted() { }, getAddressList() { getGroupBuyAddressPage().then(res => { console.log(res,'099') this.addressoptions = res.pageData }) }, beforeDestroy() { clearInterval(this.timer); }, addproduct() { this.form.products.push({ /* 初始化新商品 */ }); this.$nextTick(() => { this.$refs.form.validateField('products'); // 触发products字段校验 }); }, removeRow(index) { // 添加长度检查 if (this.form.products.length <= 1) { this.$message.warning('至少需要保留一个商品'); return; } this.form.products.splice(index, 1); this.$nextTick(() => { this.$refs.form.validateField('products'); }); }, handleProductAvatarChange(file) { if (!file || !file.raw) return; const reader = new FileReader(); reader.onload = (e) => { const img = new Image(); img.onload = () => { // 限制最大尺寸(合理值:800×600) const MAX_SIZE = 800; let width = img.width; let height = img.height; // 按比例缩放到最大尺寸 if (width > MAX_SIZE || height > MAX_SIZE) { const scale = Math.min(MAX_SIZE / width, MAX_SIZE / height); width *= scale; height *= scale; } // 画布压缩处理 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); // 关键优化:降低质量并生成更短Data URL this.form.products.image = canvas.toDataURL(file.type, 0.01); // 压缩质量65% }; img.src = e.target.result; }; reader.readAsDataURL(file.raw); }, handleAvatarChange(file) { if (!file || !file.raw) return; const reader = new FileReader(); reader.onload = (e) => { const img = new Image(); img.onload = () => { // 限制最大尺寸(合理值:800×600) const MAX_SIZE = 800; let width = img.width; let height = img.height; // 按比例缩放到最大尺寸 if (width > MAX_SIZE || height > MAX_SIZE) { const scale = Math.min(MAX_SIZE / width, MAX_SIZE / height); width *= scale; height *= scale; } // 画布压缩处理 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); // 关键优化:降低质量并生成更短Data URL this.form.cover = canvas.toDataURL(file.type, 0.01); // 压缩质量65% }; img.src = e.target.result; }; reader.readAsDataURL(file.raw); }, // 表单重置 reset() { this.form = { addressIds: [], cover: null, canCancel: 0, detailInfo: null, endTime: null, id: 0, isAutoEnd: 0, isGetPhone: 0, isGetRealName: 0, isHideList: 0, isHideOrderAmount: 0, isJoin: 0, maxJoinNum: 0, minAmount: 0, name: "", products: [ { detail:"", id: 0, image: imgUrl, limitNum: 0, name: "", parentId: 0, price: 0, soldNum: 0, totalNum: 0 } ], realEndTime: "", startTime: "", status: 0, } }, // // 取消关闭弹窗 // closeDialog() { // this.currentImgIndex = 0 // this.selectImgUrl = '' // this.imgDialogVisible = false // }, // // 确认默认图片关闭弹窗 // submitPic() { // this.form.cover = this.selectImgUrl // this.imgDialogVisible = false // }, hasCommonValue(arr) { let seen = new Set(); // 用于存储已经遇到的值 for (let obj of arr) { for (let value of obj.jobUsers) { // 如果值已经存在于 set 中,返回 true if (seen.has(value.userId)) { return true; } // 将当前值加入 set seen.add(value.userId); } } return false; // 如果没有重复的值,返回 false }, /** 提交按钮 */ submitForm() { console.log(this.form, '000') // return this.form.detailInfo = this.$refs.ueditor.getContent(); let newForm = { addressIds: this.form.addressIds, canCancel: this.form.selectedItemsFunction.includes('canCancel') ? 1 : 0, cover: this.form.cover[0] && this.form.cover[0].url, detailInfo: this.form.detailInfo, endTime: this.form.endTime, id: this.form.id, isAutoEnd: this.form.isAutoEnd === true ? 1 : 0, isGetPhone: this.form.selectedItemsOther.includes('isGetPhone') ? 1 : 0, isGetRealName: this.form.selectedItemsOther.includes('isGetRealName') ? 1 : 0, isHideList: this.form.selectedItemsFunction.includes('isHideList') ? 0 : 1, isHideOrderAmount: this.form.selectedItemsFunction.includes('isHideOrderAmount') ? 1 : 0, isJoin: this.form.isJoin, maxJoinNum: this.form.maxJoinNum, minAmount: this.form.minAmount, name: this.form.name, products: this.form.products.map(item => { // const image = item.image || []; console.log(item,'==========') return { detail:item.detail, id: item.id, // image: item.image.map(img => img.url).join(','), image: item.image.map(img => img.url).join(','), limitNum: item.limitNum, name: item.name, parentId: item.parentId, price: item.price, soldNum: item.soldNum, totalNum: item.totalNum }; }), realEndTime: this.form.realEndTime, startTime: this.form.startTime, status: this.form.status, }; console.log(newForm, this.form.id) this.$refs['form'].validate(valid => { if (valid) { if (this.form.id) { editGroupBuy(newForm).then(response => { console.log(response, '00') this.$modal.msgSuccess('修改成功') this.$router.back(-1) }) } else { if (this.form.name != '' && this.form.cover != '') { addGroupShop(newForm).then(response => { console.log(response) this.$modal.msgSuccess('新增成功') this.$router.back(-1) }) } else { this.$modal.msgError('请完善信息') } } } }) }, handleBack() { this.$router.back(-1) }, // 新增时间段 changeStatus() { if (this.currentTime) { this.timer = setInterval(() => { this.currentTime = new Date().toLocaleTimeString(); console.log(this.currentTime, '90') }, 1000); } }, // 改变时间段的初始时间 changeStartTime(value, timeIndex) { console.log(this.form.jobUserVOLists[timeIndex].jobList) if (this.form.jobUserVOLists[timeIndex].jobList) { this.form.jobUserVOLists[timeIndex].jobList.forEach(item => { item.checkInTime = value if (item.checkOutTime && item.checkInTime) { item.workHour = getISOTime(item.checkInTime, item.checkOutTime) if (item.jobUsers) { item.jobUsers.forEach(itemson => { itemson.workHour = item.workHour itemson.point = parseInt(item.pointPercent) * item.workHour }) } } }) } }, // 改变时间段的初始时间 changeEndTime(value, timeIndex) { if (this.form.jobUserVOLists[timeIndex].jobList) { this.form.jobUserVOLists[timeIndex].jobList.forEach(item => { item.checkOutTime = value if (item.checkOutTime && item.checkInTime) { item.workHour = getISOTime(item.checkInTime, item.checkOutTime) if (item.jobUsers) { item.jobUsers.forEach(itemson => { itemson.workHour = item.workHour itemson.point = parseInt(item.pointPercent) * item.workHour }) } } }) } }, // 跳转 toPrck() { window.open('https://lbs.amap.com/tools/picker') }, } } </script> <style scoped lang="scss"> .container { background-color: #f5f5f5; padding: 1%; } .title_type { font-size: 24px; font-weight: 700; margin-bottom: 20px; } .dialog-footer { display: flex; flex-direction: row; justify-content: center; align-items: center; padding-bottom: 30px; } .avatar { width: 50px; height: 50px; display: block; } .avatar-uploader .el-upload { width: 100px; height: 100px; border: 1px dashed #ddd; border-radius: 4px; cursor: pointer; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; } .avatar-uploader-icon { font-size: 20px; /* 调整图标大小 */ width: 20px; height: 20px; line-height: 30px; text-align: center; } .avatar-uploader .el-upload:hover { border-color: #409EFF; } .coverImage { width: 214px; height: 129px; border-radius: 6px; cursor: pointer; } .el-upload-list__item-thumbnail { width: 80px; /* 设置图片宽度 */ height: 80px; /* 设置图片高度 */ object-fit: cover; /* 保持图片比例并覆盖容器 */ } .select_mask { position: absolute; z-index: 2; background-color: rgba(127, 125, 121, 0.5); text-align: center; top: 0; bottom: 0; left: 0; right: 0; width: 214px; height: 129px; display: flex; justify-content: center; align-items: center; } .margin-right-10 { margin-right: 10px; } .job_box { /* border: 1px solid #ccc; */ background-color: #F8F8F8; padding: 46px 10px 10px; margin-bottom: 10px; margin-left: 50px; border-radius: 10px; } ::v-deep .el-upload-list__item{ width: 60px; height: 60px; } ::v-deep .el-upload--picture-card { width: 60px; height: 60px; position: relative; } ::v-deep .el-upload--picture-card .el-icon-plus { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); } </style>
最新发布
11-18
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值