<el-form-item label="图片" :rules="createRules.strRequired" >
<el-upload
class="upload-demo"
ref="upload"
multiple
:on-preview="handlePictureCardPreview"
:on-change="handlePicChange"
:before-upload="beforeAvatarUpload"
action="/admin/uploads/posts?type=1"
:on-remove="handleRemove"
:file-list="fileListPic"
limit="5"
:auto-upload="true"
:on-exceed="handleExceedPic"
accept=".jpg,.jpeg,.png"
list-type="picture">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传最多五个jpg/png文件,且单个文件不超过1M</div>
</el-upload>
</el-form-item>
return {
fileListPic:[],
},
methods: {
//图片
handlePicChange(file, fileList){
this.fileListPic = fileList;
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeAvatarUpload(file) {
var isJPG;
if (!/image\/(jpeg|png)/.test(file.type)) {
alert('只能上传.jpg, .png格式的图片!');
return;
} else {
isJPG = true;
}
const isLt3M = file.size / 1024 / 1024 < 1;
if (!isLt3M) {
this.$message.error('上传图片大小不能超过 1MB!');
}
return isJPG && isLt3M;
},
handleExceedPic() {
this.$notify({
title: '警告',
message: '最多只能上传五个图片',
type: 'warning'
});
},
handleRemove(){
},
// 提交维护工序信息
submitForm(formName) {
let self = this;
if (self.fileListPic == null || self.fileListPic == [] || self.fileListPic.length==0) {
self.$message.error('请上传图片');
return false;
}
var data = self.createForm;
var tmpPic = []
var tmpVid = []
this.fileListPic.forEach((file) => {
tmpPic.push(file.response.url);
});
this.fileListVid.forEach((file) => {
tmpVid.push(file.response.url);
});
data['pic_url'] = tmpPic;
data['video_url'] = tmpVid;
data['status'] = self.status;
self.$refs[formName].validate((valid) => {
if (valid) {
let params = {
'_token': LA.token,
'data': data,
};
$.ajax({
url: "/admin/processbase/store",
type: "POST",
data: params,
dataType: 'json',
beforeSend: function (res) {
self.fullscreenLoading = true;
},
success: function (res) {
self.$notify({
title: res.title,
message: res.message,
type: res.type
});
if (res.code == 100) {
self.fullscreenLoading = false;
self.dialogCreateVisible = false;
self.fileListPic = [];
self.fileListVid = [];
self.getData();
}
},
error: function () {
self.fullscreenLoading = false;
}
});
} else {
self.$notify({
title: '警告',
message: '填写的工序信息有误!!',
type: 'warning'
});
self.fullscreenLoading = false;
}
});
},
//停用
handleDelete(row) {
let that = this;
let list_id = row.id
if (list_id) {
that.$confirm('确认要停用?', '停用后不可恢复!', {
confirmButtonText: '确认停用',
cancelButtonText: '取消',
type: 'success',
callback: action => {
if (action === 'confirm') {
var data = {
'_token': LA.token,
'id': list_id,
};
$.ajax({
url: "/admin/processbase/delete",
type: "DELETE",
data: data,
dataType: 'json',
success: function (data) {
that.$notify({
title: '停用',
message: data.message,
type: data.type
});
//刷新数据
that.tableData = that.tableData.filter((sr) => {
if (sr != row) {
return sr;
}
});
}
});
}
}
})
}
},
}
//文件上传
action=“/admin/uploads/posts?type=1”
//文件上传
public static function upload_ajax_file(Request $request){
$type = $request->type;
if (!empty($request->file)){
$tmp = $request->file;
if($type == 1){
$path = 'processimg/'; //工序图片
}
elseif($type == 2){
$path = 'video/'; //视频
}
elseif($type == 3){
$path = 'placeimgs/'; //品名图片
}
else{
$path = getDateH(1);
}
if ($tmp->isValid()) { //判断文件上传是否有效
$FileType = $tmp->getClientOriginalExtension(); //获取文件后缀
$FilePath = $tmp->getRealPath(); //获取文件临时存放位置
//$FileName = $path.date('Y-m-d') .'/'. uniqid() . '.' . $FileType; //定义文件名
$FileName = $path. uniqid() . '.' . $FileType; //定义文件名
Storage::disk('admin')->put($FileName, file_get_contents($FilePath)); //存储文件
$url = '/uploads/'.$FileName;
return response()->json(['status' => 200, 'url' => $url,'message' => '文件上传完成', 'type' => 'success']);
}
}
}