【ajax实战05】文章封面发布

一:实现效果

二:实现步骤

1 准备标签结构和样式

html结构样式

javascript 复制代码
<div class="cover">
       <label for="img">封面:</label>
       <label for="img" class="place">+</label>
       <input class="img-file" type="file" name="img" id="img" hidden="">
       <img class="rounded">
 </div>

2 获取提交的文件保存在表单对象(FormData)中(服务器要求)

3 单独上传图片并得到图片url地址

4 回显并切换img标签展示(隐藏+号上传标签)

javascript 复制代码
document.querySelector('.img-file').addEventListener('change', async e => {
  //从FileList对象中选取属性名为0的对象
  const file = e.target.files[0]
  console.log(file);
  //  *  2.2 选择文件并保存在 FormData
  //可以使用FormData对象携带表单数据
  const formData = new FormData()
  formData.append('image', file)
  console.log(formData);
  //利用async和await等待axios成功返回的结果
  const result = await axios({
    url: '/v1_0/upload',
    method: 'post',
    data: formData
  })
    //  *  2.3 单独上传图片并得到图片 URL 网址
  // console.log(result);
  const imgUrl = result.data.url
  document.querySelector('.rounded').src = imgUrl
  document.querySelector('.rounded').classList.add('show')
  document.querySelector('.place').classList.add('hide')
})

当点击img更换图片

javascript 复制代码
//点击img可以重新切换封面
// 思路:img点击=》用JS方式触发文件选择元素(input标签),用click事件方法模拟点击input
document.querySelector('.rounded').addEventListener('click', () => {
  document.querySelector('.img-file').click()
})

注意:图片地址临时存储在img标签上,并未和文章关联保存

相关推荐
喜欢你,还有大家28 分钟前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在32 分钟前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi43 分钟前
Dokploy安装和部署项目流程
运维·前端
普通网友1 小时前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢1 小时前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_1 小时前
React知识:useState和useRef的使用
前端·react.js
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20201 小时前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象1 小时前
flutter第二话题-布局约束
前端
龙在天1 小时前
我是前端,scss颜色函数你用过吗?
前端