首先是html代码
<html>效果如下：
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/avue.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/axios-0.18.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
</head>
<body>
<div id="app">
<avue-form ref="form" v-model="obj" :option="option" @submit="submit">
<template slot-scope="scope" slot="menuForm">
<el-button @click="tip">自定义按钮</el-button>
</template>
</avue-form>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<!-- import JavaScript -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-ui.2.15.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/avue.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
obj: {},
sizeValue: 'small'
}
},
computed: {
option() {
return {
size: this.sizeValue,
mockBtn: false,
submitText: '完成',
printBtn: false,
labelPosition: "top",
column: [ {
label: "手机号",
mock: {
type: 'phone'
},
span: 12,
prop: "phone",
}, {
label: '图片',
prop: 'imgurl',
type: 'upload',
listType: 'picture-img',
loadText: '图片上传中，请稍等',
propsHttp: {
// home类似axios中的baseurl会拼接到返回的url前面
home: '/',
//返回的json数组格式{path:"/folder/name.png"}
url: 'path',
},
span: 24,
tip: '只能上传jpg/png用户头像，且不超过500kb',
//图片上传api
action: 'upload.php'
},
]
}
}
},
mounted() {},
methods: {
handleUploadImageDelete(column, path) {
//column 列配置
console.log(column)
// path及图片全地址，因为我后台存的是文件名 所以做了截取
const newPath = path.slice(28, path.length)
// 这里一定要返回Promise 不返回页面报错 官方说的返回true和false好像没用
return new Promise((resolve, reject) => {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delUploadImage({
path: newPath
})
// 重点来了 这里操作完以后 一定一定要resolve出去，因为这样avue会将原来的数据给清除 如果不resolve，那么再添加图片的话 他会把得到的路径与之前的拼接成一个字符串用“，”分割
resolve()
}).catch(() => {
// 这里也一定一定要reject，虽然不搞 看似好像没问题 保险起见还是给写上，毕竟我不想再爬坑了 哈哈哈
reject()
this.$message({
type: 'info',
message: '已取消删除'
})
})
})
},
submit () {
this.$message.success('当前数据'+JSON.stringify(this.obj));
},
tip() {
this.$message.success('自定义按钮');
}
}
})
</script>
</body>
</html>
发送的数post 名字是filename，那么php代码如下：
<?php
//1、设置编码utf8
header("Content-Type: text/html; charset=UTF-8");
//2、获取文件信息
$_upfiles = $_FILES['file'];
copy($_upfiles['tmp_name'], "upload/". $_upfiles['name']);
//8、输出：成功
echo json_encode(['path' => "upload/". $_upfiles['name']]);
?>
网友回复
我知道答案，我要回答
私活外包
最新提问
为啥所有的照片分辨率提升工具都会修改照片上的图案细节？
js如何在浏览器中将webm视频的声音分离为单独音频？
微信小程序如何播放第三方域名url的mp4视频？
ai多模态大模型能实时识别视频中的手语为文字吗？
如何远程调试别人的chrome浏览器获取调试信息？
为啥js打开新网页window.open设置窗口宽高无效？
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音？
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载？
python如何直接获取抖音短视频的音频文件url？
js在浏览器中如何使用MediaStream与MediaRecorder实现声音音频多轨道混流？
