|
|
@@ -11,10 +11,10 @@
|
|
|
"
|
|
|
>
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
|
- <el-form-item label="关联场景" prop="kindergartenId" required>
|
|
|
+ <el-form-item label="场景" prop="kindergartenId">
|
|
|
<SceneSelect v-model="form.kindergartenId" :clearable="false" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="关联活动">
|
|
|
+ <el-form-item label="活动">
|
|
|
<ActivitySelect
|
|
|
v-model="form.activityId"
|
|
|
:kindergartenId="form.kindergartenId"
|
|
|
@@ -23,36 +23,44 @@
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="图片" prop="urls" required>
|
|
|
- <el-upload
|
|
|
- action
|
|
|
- :http-request="upload"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- :on-preview="handlePreview"
|
|
|
- :before-remove="beforeRemove"
|
|
|
- :on-remove="handleRemove"
|
|
|
- :on-success="handleSuccess"
|
|
|
- :on-exceed="handleExceed"
|
|
|
- drag
|
|
|
- multiple
|
|
|
- :limit="limit"
|
|
|
- :file-list="fileList"
|
|
|
- >
|
|
|
- <i class="el-icon-upload"></i>
|
|
|
- <div class="el-upload__text">
|
|
|
- 将文件拖到此处，或
|
|
|
- <em>点击上传</em>
|
|
|
- </div>
|
|
|
- <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
|
|
|
- </el-upload>
|
|
|
+ <el-form-item label="图片">
|
|
|
+ <el-row>
|
|
|
+ <el-upload
|
|
|
+ action
|
|
|
+ :http-request="upload"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ drag
|
|
|
+ multiple
|
|
|
+ :limit="limit"
|
|
|
+ :file-list="fileList"
|
|
|
+ >
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ 将照片拖到此处，或<em>点击上传</em>
|
|
|
+ </div>
|
|
|
+ <div slot="tip" class="el-upload__tip">
|
|
|
+ <el-row>注意事项：</el-row>
|
|
|
+ <el-row>1. 上传照片大小要在1MB ~ 100MB之间哦!</el-row><!-- todo -->
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </el-row>
|
|
|
|
|
|
- <el-progress
|
|
|
- v-show="showProgress"
|
|
|
- :text-inside="true"
|
|
|
- :stroke-width="15"
|
|
|
- :percentage="progress"
|
|
|
- ></el-progress>
|
|
|
+ <el-row style="text-align: right;">
|
|
|
+ <el-button class="mt-40" size="small" type="primary" @click="close">确认</el-button>
|
|
|
+ </el-row>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
+ <el-progress
|
|
|
+ v-show="showProgress"
|
|
|
+ :text-inside="true"
|
|
|
+ :stroke-width="15"
|
|
|
+ :percentage="progress"
|
|
|
+ ></el-progress>
|
|
|
</el-form>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
@@ -75,15 +83,13 @@ export default {
|
|
|
modal: true,
|
|
|
|
|
|
form: {
|
|
|
- kindergartenId: null,
|
|
|
- activityId: '',
|
|
|
- urls: []
|
|
|
+ kindergartenId: '',
|
|
|
+ activityId: ''
|
|
|
},
|
|
|
rules: {
|
|
|
kindergartenId: [
|
|
|
- { required: true, message: '请选择关联场景', trigger: 'blur' }
|
|
|
- ],
|
|
|
- urls: [{ required: true, message: '请上传图片', trigger: 'change' }]
|
|
|
+ { required: true, message: '请选择场景', trigger: 'blur' }
|
|
|
+ ]
|
|
|
},
|
|
|
|
|
|
fileList: [], // 文件列
|
|
|
@@ -100,7 +106,7 @@ export default {
|
|
|
methods: {
|
|
|
// 文件超出个数限制时的钩子
|
|
|
handleExceed(files, fileList) {
|
|
|
- this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
|
|
|
+ this.$message.warning(`每次只能上传 ${this.limit} 张照片`);
|
|
|
},
|
|
|
// 点击文件列表中已上传的文件时的钩子
|
|
|
handlePreview(file) {},
|
|
|
@@ -127,71 +133,74 @@ export default {
|
|
|
// this.$message.error("请上传正确的视频格式");
|
|
|
// return false;
|
|
|
// }
|
|
|
- const isLt100M = file.size / 1024 / 1024 > 5 && file.size / 1024 / 1024 < 1024;
|
|
|
+ const isLt100M = file.size / 1024 / 1024 > 1 && file.size / 1024 / 1024 < 100;
|
|
|
if (!isLt100M) {
|
|
|
- this.$message.error("上传照片大小要在5MB ~ 1GB之间哦!");
|
|
|
+ this.$message.error("上传照片大小要在1MB ~ 100MB之间哦!");
|
|
|
return false;
|
|
|
}
|
|
|
const isLt30 = file.name.length < 30;
|
|
|
if (!isLt30) {
|
|
|
- this.$message.error('上传视频文件名称长度必须要小于30个文字哦!');
|
|
|
- return false;
|
|
|
- }
|
|
|
- if (!this.form.kindergartenId) {
|
|
|
- this.$error('请先选择幼儿园');
|
|
|
+ this.$message.error('上传照片名称长度必须要小于30个文字哦!');
|
|
|
return false;
|
|
|
}
|
|
|
},
|
|
|
// http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
|
|
|
upload(file) {
|
|
|
const _that = this;
|
|
|
- async function multipartUpload() {
|
|
|
- let temporary = file.file.name.lastIndexOf('.');
|
|
|
- let fileNameLength = file.file.name.length;
|
|
|
- let fileFormat = file.file.name.substring(
|
|
|
- temporary + 1,
|
|
|
- fileNameLength
|
|
|
- );
|
|
|
- let fileName = getFileNameUUID() + '.' + fileFormat;
|
|
|
+ this.$refs.form.validate(async valid => {
|
|
|
+ if (!valid) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
|
|
|
- client(_that.dataObj)
|
|
|
- .multipartUpload(`tmp/${fileName}`, file.file, {
|
|
|
- progress: function(p) {
|
|
|
- // todo 每个文件一个进度条？？？如何限定关联的业务参数（幼儿园id、活动id）
|
|
|
- // p进度条的值
|
|
|
- console.log(p);
|
|
|
- _that.showProgress = true;
|
|
|
- _that.progress = Math.floor(p * 100);
|
|
|
- }
|
|
|
- })
|
|
|
- .then(result => {
|
|
|
- //上传成功返回值，可针对项目需求写其他逻辑
|
|
|
- // todo 这里每完成一个文件，会回调一次。这里请求服务端保存业务。照片信息 + 幼儿园 + 活动...
|
|
|
- console.log(result);
|
|
|
- _that.saveData(result);
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.log('err:', err);
|
|
|
- });
|
|
|
- }
|
|
|
+ async function multipartUpload() {
|
|
|
+ let temporary = file.file.name.lastIndexOf('.');
|
|
|
+ let fileNameLength = file.file.name.length;
|
|
|
+ let fileFormat = file.file.name.substring(
|
|
|
+ temporary + 1,
|
|
|
+ fileNameLength
|
|
|
+ );
|
|
|
+ let fileName = getFileNameUUID() + '.' + fileFormat;
|
|
|
+
|
|
|
+ // https://github.com/ali-sdk/ali-oss#multipartuploadname-file-options
|
|
|
+ client(_that.dataObj)
|
|
|
+ .multipartUpload(`tmp/${fileName}`, file.file, {
|
|
|
+ parallel: 4, // 同时处理分片
|
|
|
+ partSize: 2 * 1024 * 1024, // 每个分片大小
|
|
|
+ progress: function(p) { // p进度条的值
|
|
|
+ // todo 每个文件一个进度条？？？如何限定的业务参数（幼儿园id、活动id）
|
|
|
+ console.log(p);
|
|
|
+ _that.showProgress = true;
|
|
|
+ _that.progress = Math.floor(p * 100);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(result => { // 上传成功返回值，可针对项目需求写其他逻辑
|
|
|
+ _that.saveData(result, file.file.name, file.file.size);
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log('err:', err);
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- multipartUpload();
|
|
|
+ multipartUpload();
|
|
|
+ })
|
|
|
},
|
|
|
- async saveData(obj) {
|
|
|
- console.log(obj);
|
|
|
+ async saveData(obj, name, size) {
|
|
|
const params = {
|
|
|
kindergartenId: this.form.kindergartenId,
|
|
|
activityId: this.form.activityId,
|
|
|
fileRequest: {
|
|
|
- // todo 补充字段
|
|
|
- originalFilename: 'abc',
|
|
|
- size: 100,
|
|
|
+ originalFilename: name,
|
|
|
+ size: size,
|
|
|
path: obj.name
|
|
|
}
|
|
|
};
|
|
|
const { success, msg } = await saveItem(params);
|
|
|
if (success) {
|
|
|
}
|
|
|
+ },
|
|
|
+ close () {
|
|
|
+ this.modal = false;
|
|
|
+ this.$g_emit('photo_reload');
|
|
|
}
|
|
|
}
|
|
|
};
|
梁展鹏