首先是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']]);
?>
网友回复
我知道答案，我要回答
私活外包
最新提问
如何破解绕开seedance2.0真人照片生成视频 限制？
python有哪些算法可以将视频中的每个帧图片去除指定区域水印合成新的视频？
iphone的激光雷达数据能否实时传输到three三维空间中？
豆包sora等ai视频生成大模型生成的视频水印如何去除？
python如何实现在电脑上拨号打电话给手机？
具身机器人与人形机器人区别？
nodejs如何将一个完整的js代码文件切割成不同的部分混淆后动态加载进入html运行？
为啥windows.onerror捕获js错误是这样的{"message":"Script error.","source":"","lineno":0,"colno":0,"stack":null,
2026年ai将全面接管编程？
WebMCP是干啥的？
