1、juqey中的方法
<body><input type="file" id="file" style="display: none;"><button id="btn">uploadbutton>body><script>let btn = document.querySelector('#btn')let file = document.querySelector('#file')btn.onclick = function() {file.click() // 调取系统选择图片的弹框}// 监听input的file变化值file.onchange = function (event) {let file = event.target.files[0]upload(file)}function upload(file) {let xhr = new XMLHttpRequest()xhr.open('post', '/upload', true)let formData = new FormData()formData.set('filename', file)xhr.send(formData)xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {alert('success')}}}script>在react中的方法
<Button type="primary" block style={{ width: "50%", height: "50px", borderRadius: "10PX" }} onClick={this.btnpic} > 点击上传 Button> <input type="file" id="file" // 只接受图像文件 accept="image/*" style={{ display: "none" }} onChange={this.inputchange} /> -------------------------------------------------------- // 上传图片 btnpic = () => { let file = document.getElementById("file"); file.click(); // 调取系统选择图片的弹框 }; // 监听input的file变化值 inputchange = (e) => { // console.log(e); console.log(e.target.files[0]); let file = e.target.files[0]; // 调用上传图片接口 this.upload(file); }; // 上传文件接口 upload = async (file) => { // 获取用户pk let usepk = window.sessionStorage.getItem("pk"); // 创建创建formdata对象 let formData = new FormData(); //通过set方法对值进行设置 formData.append("imgFile", file); //可以通过append()方法来追加数据 formData.append("user_pk", usepk); const { data: res } = await axios.post("user/user_info/add/img/", formData); console.log(res); if (res.status !== 1) return; // 获取数据接口 判断用户 this.inforData(); };
扫一扫
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
